CSS 넘치는 텍스트 말줄임표 (···) 글자로 나타내기 + 2줄/3줄 조정하기 : ellipsis

 

-  기본 (1줄) -

가장 간단하고 기본적인 형태로 치면 아래 두 줄이다.

overflow: hidden;
text-overflow: ellipsis;

일단 정해진 범위 밖으로 벗어나는 요소를 감추도록 한다.
overflow: hidden;
범위를 벗어나는 요소가 텍스트라면 감추고 나서 말줄임표를 남기도록 한다.
text-overflow: ellipsis;

 

- 2줄, 3줄 등으로 맞춰서 줄이기 -

text-overflow: ellipsis;
overflow: hidden;
white-space: normal;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;

여기서 "-webkit-line-clamp" 값을 원하는 대로 바꾸면 된다.

ex)
-webkit-line-clamp: 3;  // 3줄로 줄임
-webkit-line-clamp: 4;  // 4줄로 줄임

 

 

 

-220825