Martin`s Work

[CSS] 2줄이상일때 "..." 처리 본문

CSS&CSS3

[CSS] 2줄이상일때 "..." 처리

Martin`s Work 2017. 2. 22. 10:51

1.  -webkit-line-clamp


웹킷 기반의 브라우저일 경우 줄수를 설정해 그 이상 되었을때 "..." 처리가 되도록 설정 가능


1
2
3
4
5
6
7
div{ 
    display:-webkit-box;
    text-overflow:ellipsis;
    -webkit-line-clamp:2; /*라인수 설정*/
    word-wrap:break-word;
    -webkit-box-orient: vertical;
}
cs



-webkit-line-clamp 는 "..."처리가 되는 라인수를 지정할 수 있습니다. 


이 외에, 웹킷기반의 브라우저가 아닐 경우를 대비하여 추가적으로 높이값과 hidden처리를 해줘야합니다.


1
2
3
4
5
6
7
8
9
div{ 
    display:-webkit-box;
    height:20px; /*높이값 추가*/
    overflow:hidden; /* 숨김처리 */
    text-overflow:ellipsis;
    -webkit-line-clamp:2;
    word-wrap:break-word;
    -webkit-box-orient: vertical;
}
cs


Comments