다양한 텍스트 말줄임 방법 #1

text ellipsis (텍스트 말줄임)

이 글에서는 CSS3의 line-clamp 를 사용하지 않은 방법을 소개합니다.

하나는 CSS 트릭을 이용한 방법이고 또 다른 하나는 jquery.ellipsis 플러그인입니다.

CSS Trick

다음의 마크업과 CSS 를 참고하시기 바랍니다.

html

<div class="name">
 <p>Galaxy Note II Protective CoverGalaxy Note II Protective Cover</p>
</div>

css

html, body, p {
 margin: 0;
 padding: 0;
 font-family: sans-serif;
}
.name {
width:200px; 
overflow: hidden;
 position: relative;
 height: 50px;
 line-height: 25px;
 margin: 20px;
}
.name:before {
 content:"";
 float: left;
 width: 5px;
 height: 50px;
}
.name > p {
 float: right;
 width: 100%;
 margin-left: -5px;
 text-align:center;
 word-break:break-all;
}
.name:after {
 content: "\02026";
 float: right;
 position: relative;
 top: -21px;
 left: 100%;
 width: 25px;
 margin-left:-20px;
 background:#fff;
}

jQuery ellipsis

http://github.com/jjenzz/jquery.ellipsis 를 참고바랍니다.

jQuery ellipsis 는 반응형도 지원하고 있습니다.

related links

1. 다양한 방법을 이용한 텍스트 말줄임 효과 #2

Jaehee's WebClub