[css] 한 줄 이상 ... 말줄임 처리

고정된 width의 element에서 css로 text 처리방법

width: 100px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

• width: 100px; : 고정된 길이가 있어야 잘리는 글자를 지정할 수 있다.
• overflow:hidden : 넓이를 넘어서는 내용에 대해서는 보이지 않게 처리함
• text-overflow:ellipsis : 글자가 넓이를 넘을 경우 생략부호를 표시함
• white-space:nowrap : 공백문자가 있는 경우 줄바꿈하지 않고 한줄로 나오게 처리함 (\A로 줄바꿈가능)

유동적인 width (%값)의 element에서 css로 text 처리방법

출처: https://yeolco.tistory.com/151 [열코의 프로그래밍 일기]

overflow : hidden;
text-overflow : ellipsis; (width를 설정하지 않고 여기까진 위와 동일하다.)
height : 20px; 
/* 대신 height를 설정해준다. 텍스트 크기에 맞춰 height가 1줄인 경우를 생각하자.*/
word-wrap : break-word; 
display : -webkit-box;
-webkit-line-clamp : 1; 
/* 줄 개수를 설정한다. 만약 2줄이상이라면 height와 해당 값을 수정한다. */
-webkit-box-orient: vertical; 

유동적인 width인 element에서 위의 방법을 설정하려고하니 width가 %로 설정되어있어 해당 방법이 통하지 않는다.

이럴때는 height를 고정값으로 설정하여 위 방법을 적용시킬 수 있다.

위와 같이 1줄의 경우만 설명한다.

css를 다음과 같이 추가해보자.
위와 같이 설정했다면 유동적인 width의 element에서도 text가 넘어설때 자동으로 ...처리가 되는것을 확인할 수 있다.

참고
https://yeolco.tistory.com/151 [열코의 프로그래밍 일기]
https://m.blog.naver.com/PostView.naver?isHttpsRedirect=true&blogId=classe82&logNo=221105590552