긴 글 텍스트 축약하기
DIV에 긴 텍스트가 들어가면 크기가 조절이 되거나 일명 글자가 삐져나오죠
그래서 보통 몇 글자 이상이면 ...을 붙혀서 축약 시키도록 코딩을 합니다.
하지만 해당 기능 각 프론트 개발자마다 다르게 구현 해놓아 유지보수가 어렵습니다.
그래서 오늘은 긴 텍스틀 알아서 축약해주는 플러그인을 소개하겠습니다.
▼우선 참조 사이트는 아래입니다. nl을 보아 네덜란드 개발자인거 같은데
홈페이지 부터 매우 이쁘네요
자세한 레퍼런스는 해당 홈페이지에서 둘러보세요
해당 사이트를 참고해 개발자 분들이
빠르게 익힐 수 있도록
익스프레스하게 예제를 만들어봤습니다.
▼jquery와 해당 dotdotdot.js를 참조하였습니다.
1
2
|
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript" language="javascript" src="jquery.dotdotdot.js"></script>
|
cs |
▼우선 사용법은 선택자의 .dotdotdot();을 넣으면 됩니다.
1
2
3
|
$(function(){
$('#gocoder').dotdotdot();
});
|
cs |
▼테스트를 위해 div 에 class 속성을 주었습니다.
1
2
3
4
5
|
.gocoder{
width:250px;
height:250px;
border:3px solid #CCC;
}
|
cs |
▼div는 이렇고 이안에 내용을 담게 됩니다.
1
2
3
|
<div class="gocoder" id="gocoder" style="float:right;">
</div> |
cs |
▼그리고 소스의 합은 아래와 같습니다.
gocoder_dotdotdot_example.zip
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript" language="javascript" src="jquery.dotdotdot.js"></script>
<script type="text/javascript" language="javascript">
$(function () {
$('#gocoder').dotdotdot();
});
</script>
<style>
.gocoder {
width: 250px;
height: 250px;
border: 3px solid #CCC;
}
</style>
</head>
<body>
<div class="gocoder" id="gocoder" style="float:left;">
동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라 만세 무궁화 삼천리 화려 강산 대한사람 대한으로 길이 보전하세 남산 위에 저 소나무 철갑을 두른듯 바람서리 불변함은 우리 기상일세 무궁화 삼천리 화려
강산 대한사람 대한으로 길이 보전하세 가을 하늘 공활한데 높고 구름 없이 밝은 달은 우리 가슴 일편단심일세 무궁화 삼천리 화려 강산 대한사람 대한으로 길이 보전하세 이 기상과 이 마음으로 충성을 다하여
괴로우나 즐거우나 나라사랑하세 무궁화 삼천리 화려 강산 대한사람 대한으로 길이 보전하세
</div>
<div class="gocoder" style="float:right;">
동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라 만세 무궁화 삼천리 화려 강산 대한사람 대한으로 길이 보전하세 남산 위에 저 소나무 철갑을 두른듯 바람서리 불변함은 우리 기상일세 무궁화 삼천리 화려
강산 대한사람 대한으로 길이 보전하세 가을 하늘 공활한데 높고 구름 없이 밝은 달은 우리 가슴 일편단심일세 무궁화 삼천리 화려 강산 대한사람 대한으로 길이 보전하세 이 기상과 이 마음으로 충성을 다하여
괴로우나 즐거우나 나라사랑하세 무궁화 삼천리 화려 강산 대한사람 대한으로 길이 보전하세
</div>
<br/>
<br/>
</body>
</html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript" language="javascript" src="jquery.dotdotdot.js"></script>
<script type="text/javascript" language="javascript">
$(function () {
$('#gocoder').dotdotdot();
});
</script>
<style>
.gocoder {
width: 250px;
height: 250px;
border: 3px solid #CCC;
}
</style>
</head>
<body>
<div class="gocoder" id="gocoder" style="float:left;">
동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라 만세 무궁화 삼천리 화려 강산 대한사람 대한으로 길이 보전하세 남산 위에 저 소나무 철갑을 두른듯 바람서리 불변함은 우리 기상일세 무궁화 삼천리 화려
강산 대한사람 대한으로 길이 보전하세 가을 하늘 공활한데 높고 구름 없이 밝은 달은 우리 가슴 일편단심일세 무궁화 삼천리 화려 강산 대한사람 대한으로 길이 보전하세 이 기상과 이 마음으로 충성을 다하여
괴로우나 즐거우나 나라사랑하세 무궁화 삼천리 화려 강산 대한사람 대한으로 길이 보전하세
</div>
<div class="gocoder" style="float:right;">
동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라 만세 무궁화 삼천리 화려 강산 대한사람 대한으로 길이 보전하세 남산 위에 저 소나무 철갑을 두른듯 바람서리 불변함은 우리 기상일세 무궁화 삼천리 화려
강산 대한사람 대한으로 길이 보전하세 가을 하늘 공활한데 높고 구름 없이 밝은 달은 우리 가슴 일편단심일세 무궁화 삼천리 화려 강산 대한사람 대한으로 길이 보전하세 이 기상과 이 마음으로 충성을 다하여
괴로우나 즐거우나 나라사랑하세 무궁화 삼천리 화려 강산 대한사람 대한으로 길이 보전하세
</div>
<br/>
<br/>
</body>
</html>
▼해당 파일을 웹에서 확인하면 이처럼 손쉽게 텍스트를 ... 마무리로 축약할 수 있습니다.
마무리
필요한 기능을 하나의 컴포넌트로 통일하여 개발하면
유지보수가 쉬워집니다.
'IT_Developers > Javascript' 카테고리의 다른 글
| jQuery - 예약어 변경 하기 / $.noConflict() (0) | 2018.01.06 |
|---|---|
| JavaScript - input 박스에 숫자만 입력 가능하도록 (3) | 2018.01.01 |
| JavaScript - 프론트에서 서버 시간 얻기 (0) | 2017.12.22 |
| jQuery - 게시판 정렬하기 / Table sort (0) | 2017.12.05 |
| jQuery - 제이쿼리로 QR코드 만들기 (0) | 2017.12.02 |
댓글