(HTML / CSS) text-overflow : ellipsis 사용 코딩소스

See the Pen Multiple Line Ellipsis CSS Effect by kimyangsun (@kimyangsun) on CodePen.

https://codepen.io/kimyangsun/pen/MWwYOBG

Multiple Line Ellipsis CSS Effect

text-overflow 속성중에 ellipsis 를 사용한 코드입니다.

 

한줄일 경우에는 생각보다 쉽게 white-space: nowrap; 을 사용하여 줄바꿈을 막아주고

 

text-overflow: ellipsis;

overflow: hidden;

 

이 두 css 입력하면 부모나 해당 요소의 너비를 넘어가는 순간 ... 으로

 

생략되어 보이게 됩니다.

 

문제는 여러줄일때 해당 줄부터 ...으로 생략되어 보이도록 하는 방법인데

 

-webkit-line-clamp: 3; /* 라인수 */
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;

 

이런식으로 css 를 입력해주면 라인수에 입력된 3번째 줄에서부터 ... 으로 생략되어 보이게 됩니다.

 

height 값을 조정해주고 싶을때는 line-height 와 연관시켜 값을 맞게 맞춰주면 좋을 것 같습니다.