[CSS]세로 두줄이상일때 말줄임 처리하기

예전에는 제목이나 글자수를 ... 줄일때는 개발에서 처리를 했었습니다.

CSS에서 기능이 지원되면서 한줄 말줄임은 대부분 CSS에서 처리를 하게 되었습니다.

 

가끔 두줄일때도 말줄임을 할때가 있는데요.

그럴땐 아래처럼 하시면 됩니다.

 

text{
height:50px;
text-overflow:ellipsis;
word-wrap:break-word;
display: -webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;
overflow:hidden
}

 

-webkit-line-clamp:2;

두줄일땐 2, 세줄일땐 3으로 하시면 됩니다.

(세로 높이값은 꼭 넣어야합니다.)

 

위처럼 두줄일때 말줄임... 처리가 됩니다.

 

만약 한줄일경우는 아래처럼 하시면 됩니다.

 

.text{
display: block;
width:200px;
text-overflow: ellipsis;
white-space: nowrap;
word-wrap: normal;
overflow: hidden;
}

 

응용해보세요~