CSS text-overflow 속성 – 텍스트의 한 줄 말줄임(…) 표시 설정

`text-overflow` 속성 사용법

text-overflow 속성은
블록 컨테이너 요소의 텍스트 영역을 벗어나 줄바꿈하지 않고 오버플로우되어 숨겨진 텍스트가 있는지를 시각적으로 나타내는 생략 부호를 표시할지(예를 들어 ...) 아니면 그냥 숨겨진 채로 남겨둘지를 설정합니다.

블록 컨테이너 요소란 너비나 높이를 지정할 수 있는 요소를 말합니다.

이 속성은 너비나 높이를 지정할 수 있는 블록 컨테이너 요소에만 적용할 수 있습니다.
너비나 높이를 지정할 수 없는 인라인 요소에는 적용할 수 없습니다.

이 속성은 텍스트의 한 줄 말줄임(...)을 CSS로 표시하는데 매우 유용합니다.

데모로 이해하기

CSS

div {
    width: 200px;
    border: 2px solid red;

    /* 줄바꿈하지 않고 말줄임을 표시하는 
       방법에 필요한 CSS 속성들 */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

HTML

<div>
    텍스트가 콘텐츠 박스의 끝에 도달했을 때
    자동으로 줄바꿈하지 않고
    오버플로우되는 텍스트는 숨기고
    생략 부호(...)를 표시하는
    방법에 대해 알아봅니다.
</div>

위 데모의 구현은 text-overflow 속성을 활용한 것입니다.
이 속성의 기능을 알면 텍스트가 한 줄로 되어 있어 줄바꿈하지 않고 말줄임(...)을 표시하는 방법에 대해 쉽게 이해할 수 있습니다.

`text-overflow` 속성을 활용하는 방법 상세한 설명

데모의 구현을 순서대로 설명하겠습니다.

아무런 설정이 없는 일반적인 텍스트 영역입니다.

HTML

<div>
    text-overflow 속성은 텍스트 영역을 벗어나
    오버플로우되어 숨겨진 텍스트가 있는지를
    시각적으로 나타내는 생략 부호를 표시할지
    아니면 그냥 숨겨진 채로 남겨둘지를 설정합니다.
</div>

데모에서 공통으로 사용할 텍스트 영역을 나타내는 <div> 태그의 공통 스타일 설정하겠습니다.

일반적인 텍스트 영역은 위의 실제 적용된 모습을 보면 알 수 있듯이 텍스트가 콘텐츠 박스의 끝에 도달했을 때 자동으로 줄바꿈시킵니다.

텍스트가 줄바꿈하지 않고 텍스트 영역을 벗어나도록(오버플로우되도록) white-space: nowrap을 설정하였습니다.

HTML

<div style="white-space: nowrap;">
    text-overflow 속성은 텍스트 영역을 벗어나
    오버플로우되어 숨겨진 텍스트가 있는지를
    시각적으로 나타내는 생략 부호를 표시할지
    아니면 그냥 숨겨진 채로 남겨둘지를 설정합니다.
</div>

white-space 속성은 요소 내부의 공백 문자(Whitespace) 처리와 줄바꿈 규칙을 설정합니다. white-space: nowrap으로 지정하면 텍스트가 콘텐츠 박스의 끝에 도달했을 때 자동으로 줄바꿈시키던 것을 자동으로 줄바꿈시키지 않습니다. 즉 텍스트가 텍스트 영역을 벗어나 오버플로우됩니다.

CSS white-space 속성

오버플로우된 텍스트를 보여지지 않도록 overflow: hidden으로 숨기겠습니다.

HTML

<div style="white-space: nowrap; overflow: hidden;">
    text-overflow 속성은 텍스트 영역을 벗어나
    오버플로우되어 숨겨진 텍스트가 있는지를
    시각적으로 나타내는 생략 부호를 표시할지
    아니면 그냥 숨겨진 채로 남겨둘지를 설정합니다.
</div>

텍스트 영역을 벗어나 오버플로우되어 숨겨진 텍스트를 text-overflow 속성으로 생략 부호를 표시하겠습니다.

HTML

<div style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
    text-overflow 속성은 텍스트 영역을 벗어나
    오버플로우되어 숨겨진 텍스트가 있는지를
    시각적으로 나타내는 생략 부호를 표시할지
    아니면 그냥 숨겨진 채로 남겨둘지를 설정합니다.
</div>

text-overflow 속성의 값을 ellipsis로 지정하면 위의 실제 적용된 모습처럼 생략 부호(...)가 표시됩니다.

주의할 점

text-overflow 속성은 다음의 세 조건이 부합되어야 구현이 가능합니다.

overflow 속성은 visible 값이 아니어야 합니다. hidden이나 scroll 또는 auto 값으로 적용되어 있어야 합니다.
whit-space 속성은 텍스트가 콘텐츠 박스의 끝에 도달했을 때 자동으로 줄바꿈시키던 것을 자동으로 줄바꿈시키지 않게 하는 nowrap이나 pre 값으로 적용되어 있어야 합니다.
그리고, 이 속성들과 값들이 적용되기 위해서는 해당 요소가 너비나 높이를 지정할 수 있는 블록 컨테이너 요소이어야 합니다.

이 세 조건이 부합되지 않으면 해당하는 요소는 text-overflow 속성이 적용되지 않습니다. 이는 당연하게도 이 두 조건 하에서 시각적으로 나타내는 생략 부호를 표시할지를 설정는 속성이기 때문입니다.

텍스트의 줄 수를 제한하여 여러 줄 말줄임(...) 표시 설정은 -webkit-line-clamp 속성이 유용합니다.

`text-overflow` 속성의 정의와 구문

text-overflow 속성의 형식은 다음과 같습니다.

구문

정의

text-overflow 속성의 정의
초깃값	`clip`
적용 요소	해당 요소가 너비나 높이를 지정할 수 있는 블록 컨테이너 요소
상속	아니오
애니메이션	아니오

값

text-overflow 속성의 값
`clip`	초깃값임. 생략 부호를 표시하지 않습니다.
`ellipsis`	생략 부호를 표시합니다. 생략 부호는 줄임표 문자(U+2026, HORIZONTAL ELLIPSIS)인 `...`입니다.

CSS -text-overflow 속성 값 예시

/* 키워드 값 */
text-overflow: clip;
text-overflow: ellipsis;

/* 글로벌 값 */
text-overflow: inherit;
text-overflow: initial;
text-overflow: revert;
text-overflow: revert-layer;
text-overflow: unset;