CSS text-overflow

CSS에서 텍스트가 overflow 될 때 ...과 같은 식으로 뒤에 잘린 부분을 나타내는 방식이다.

 

먼저 텍스트가 overflow 되는 면적을 확실히 해야 하므로, width 속성을 설정해야 한다. 이후 overflow 속성은 hidden으로 한다. 다음으로 white-space 속성을 nowrap으로 하여 텍스트 줄 바꿈이 생기지 않도록 한다.

마지막으로 text-overflow 속성을 ellipsis로 설정하여 텍스트 부분이 overflow 되었을 때, ...의 방식으로 표현되도록 설정한다.

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

어쩌다 한 번씩 사용해서 그런지, 필요할 때마다 까먹어서 여기저기 다시 찾아보게 된다.

그래서 그냥 이렇게 간단하게라도 저장해두기로 했다.