아래 링크를 참고하면 된다.
현재 모든 최신 브라우저가 다 지원한다. (놀라운 건, IE는 이미 6부터 지원하고 있었다는 것 ㅋ)
아래는 예제다.
.ellipsis {
width: 200px;
text-overflow: ellipsis;
-o-text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
word-wrap: normal !important;
display: block;
}왜 저런 식의 코드인지 설명은 링크에 들어가서 보길 바란다.
문단 말줄임
위 CSS로는 한 줄짜리만 말줄임표 붙이는 게 가능하다. 문단 수준에서 하려면 line-clamp 프로퍼티를 사용한다.
p {
width: 300px;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
}자세한 내용은 MDN의 -webkit-line-clamp 문서를 참고하라.
댓글 남기기