CSS text-overflow(텍스트 잘리는 부분 처리)

아래 사진처럼 공간이 부족한 경우 ... 으로 처리하는 예시이다.

 

 

단독으로 text-overflow을 사용하면 "..." 처리가 되지 않는다.

아래 두 가지 속성을 함께 사용해야 한다. 

overflow: hidden

white-space: nowrap

 

또한 당연한 얘기지만 글자가 width의 좌우 넓이를 넘쳐야 한다.