여러줄일때 여러 옵션이 더 들어간다.
|
1
2
3
4
5
6
|
/* 한 줄 */
.ellip{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
/* 여러 줄 */
.ellipsis{
overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; word-wrap:break-word; line-height:1.2em; height:2.4em } |
cs |
여러 줄일때, webkit-line-clamp 옵션, height 옵션을 변경한다.
ex) 네줄까지 표기하려면
|
1
2
3
4
5
6
7
8
9
10
|
.ellipsis{
overflow:hidden;
text-overflow:ellipsis;
display:-webkit-box;
-webkit-line-clamp:4;
-webkit-box-orient:vertical;
word-wrap:break-word;
line-height:1.2em;
height:4.8em
}
|
cs |
이렇게 작성.
네 줄까지 표기해야하니까, -webkit-line-clamp:4;
높이가 1.2em인데 네 줄까지 다 보여야하니까 1.2 * 4 = 4.8, height:4.8em
explorer 브라우저에서는 ... 표시가 안나온다.
대신 문자 자르기는 잘 된다.
나머지 브라우저에서는 잘 나온다.
'개발 > CSS' 카테고리의 다른 글
| CSS) 폰트 css 지정하기 (0) | 2022.04.01 |
|---|---|
| CSS) div 가로 세로 중앙정렬 (0) | 2022.04.01 |
| CSS) 모바일 반응형 홈페이지 css (media query 사용) (0) | 2022.04.01 |