개요

CSS상에서 박스를 벗어나는 글을 처리하는 방식이 여러가지가 있다 그중에서 말줄임표를 사용하는 방법을 알아보자.

원리

말줄임표를 하기 위해 필요한 속성은 다음과 같다.

white-space: nowrap;      /* 줄바꿈 안 함 */
overflow: hidden;         /* 넘친 텍스트는 숨김 */
text-overflow: ellipsis;  /* 넘치면 "..." 표시 */
width: 200px;

위에서부터 설명하자면 white-space는 요소 안에서 띄어쓰기가 여러 개 있더라도 한 칸 띄어쓰기로 바꾸고 쭉 잇는다.
기본 값은 normal이고 아래와 같다. 영역의 끝에서 자동으로 줄바꿈 처리된다.

"안녕     하세요"
→ "안녕 하세요"

근데 이걸 nowrap으로 한다면 연속 공백을 하나로 줄이고 자동으로 줄바꿈하지 않는다.
그런 다음 overflow: hidden;으로 넘치는 텍스트를 감춘다.
text-overflow는 이렇게 넘치게 된 텍스트를 어떻게 표현할 지 결정한다. ellipsis는 말줄임표를 의미한다. 반드시 width값이 있어야 하는데 해당 영역을 넘쳤는데 아닌지를 구분할 수 있어야 말줄임표로 표현할 수 있기 때문이다.

더 깊이 들어가면 브라우저 렌더링 엔진은 css스타일을 적용하면서 요소의 박스 크기를 계산한다. 그리고 텍스트도 글자단위로 박스를 만들고 가로로 배치한다.
만약 텍스트가 부모 박스를 넘어서면 보이지 않는 부분은 잘린다. 이 때 text-overflow가 적용되어있으면 브라우저는 잘린 영역 끝자리에 …를 대체 그림처럼 처리한다. 잘려서 보이지 않는 텍스트는 아예 그리지 않고 마지막 보이는 글자 뒤에 ellipsis glyph를 추가 렌더링한다.
이건 브라우저가 …기호의 크기를 구해서 삽입하는 방식이라 실제 DOM에는 존재하지 않고 화면에만 보인다.
정리하면 텍스트를 추가하는 것이 아니라 잘린 부분 자리에 ellipsis 심볼을 그리는 것이다.