[ CSS ] - 말줄임, 여러줄 말줄임 -webkit-line-clamp

말줄임 표시하기

 

1줄 말줄임

white-space: nowrap; /* 줄바꿈 허용 안함 */
overflow: hidden;
text-overflow: ellipsis;

 

white-space:nowrap 은 줄바꿈을 허용하지 않는 속성이다. 줄바꿈을 허용하지 않아야 한줄로 overflow가 생길수 있게 되어 한줄이상의 넘치는 문자열을 overflow:hidden으로 숨기고, text-overflow설정으로 말줄임표를 붙일 수 있다.

여러줄 말줄임

overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2; /* 여기에서 지정한 숫자로 말줄임 된다 */
-webkit-box-orient: vertical;

 

여러줄 말줄임이므로 white-space:nowrap설정은 제거해야한다.

 

-webkit-line-clamp : 제한할 행 수를 지정한다.(키워드,숫자 지정가능)

블럭컨텐츠안에서 행 수를 지정하여 제한할 수 있는 속성이다. 아래 2개의 display설정이 있을 때만 사용이 가능하다.

display:-webkit-box(horizontal, vertical 모두허용)

display:-webkit-inline-box 

/* Keyword value */
-webkit-line-clamp: none;

/* <integer> values */
-webkit-line-clamp: 3;
-webkit-line-clamp: 10;

/* Global values */
-webkit-line-clamp: inherit;
-webkit-line-clamp: initial;
-webkit-line-clamp: revert;
-webkit-line-clamp: revert-layer;
-webkit-line-clamp: unset;

 

[ 관련 사이트 소개 ]

 

 

 

[ Referece of MDN ] 

-webkit-line-clamp - CSS: Cascading Style Sheets | MDN