퍼블리싱
CSS
두 줄이상 말줄임 표시
- 김희영
- 2023-02-20 17:48
-webkit-box 속성을 사용한다.
|
1 2 3 4 5 |
.example { display:-webkit-box; -webkit-line-clamp:3; /* 라인 수 */ -webkit-box-orient:vertical; } |
웹킷브라우저 전용 css이므로,
익스와 같은 브라우저에서는 height 값을 지정해서 overflow:hidden으로 잘라주어야 한다.
height 값은 (line-height * 라인수) 로 계산한다.
|
1 2 3 4 5 6 7 8 |
.example { display:-webkit-box; -webkit-line-clamp:3; /* 라인 수 */ -webkit-box-orient:vertical; line-height:18px; height:54px; /* line-height:18px * 3(라인수)*/ oveflow:hidden; } |
Share
안녕하세요~ 김희영입니다 🙂
전체 0