진짜 한 10번은 찾아본 것 같다

고수들의 어록 중에 “비즈니스 로직은 별 것 아니다. 예외처리와 디버깅이 개발 기간의 대부분이다.” 라는 것이 있었는데 실제 프로젝트를 하다 보면 공감하지 않을 수가 없다.

말 줄임표도 마찬가지다. DB가 달려있는 웹 프로젝트 치고 말 줄임표 없는 프로젝트는 본 적이 없다. 사용자의 input은 때때로 개발자가 상상한 범주를 초월하는데, 특히 개발자의 머리 속에

‘흠… 이 제목은 80글자 정도는 아름답게 보여줄 수 있어. 그리고 웬만하면 사용자들은 80글자를 넘는 제목의 글을 쓰진 않을 거야.’

같은 생각이 떠올랐다면 즉시 예외처리를 준비하는 것이 현명하다.

이 … 구현하는 방법도 하도 구글링을 많이 하다보니 귀찮아져서 메모해둔다.

How?

아래 3줄만 추가해주면 된다.

overflow: hidden;  
text-overflow: ellipsis;  
white-space: nowrap;

하나씩 살펴보자. overflow는 워낙에 자주 나오니까 그렇다 치고.

text-overflow는 넘치는 내용을 사용자에게 어떻게 보여줄 것인가를 결정하는 속성이다. default 값은 clip으로, 그냥 텍스트를 툭 잘라버린다. …을 보여주기 위해서는 ellipsis로 설정해야 한다.

white-space는 문자열 줄바꿈에 관한 값인데, 기본값인 normal에서는 width를 넘는 텍스트를 자동으로 다음 줄로 넘겨버리기 때문에 …이 나오지 않는다. nowrap은
태그가 나오기 전까지 텍스트가 다음 줄로 넘어가는 것을 막아준다.

주의할 점

overflow 속성에서 눈치챘을 수도 있지만 만약 text의 컨테이너에 적절한 width나 height 제약이 없다면 위 css를 적용해도 … 대신 레이아웃을 파괴하면서 뻗어나가는 문자열을 보게 될 것이다.