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

`text-overflow` 속성 사용법

text-overflow 속성은
한 줄로 된 텍스트가 요소의 영역 밖으로 오버플로우 되어 숨겨진 텍스트라는 신호로 말줌임(...)을 표시할지 설정합니다.

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

형식 구문

구문

CSS

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

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

값

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

형식 정의

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

사용법 참고사항

text-overflow 속성을 적용하려면 해당 요소는 다음의 조건을 만족해야 합니다.

해당 요소의 텍스트가 white-space 속성의 값이 nowrap처럼 콘텐츠 박스의 끝에 도달했을 때 자동으로 줄바꿈하지 않도록 설정되어 있어야 합니다.
overflow: hidden 등으로 텍스트가 오버플로우되면 숨겨지도록 설정되어 있어야 합니다.
너비나 높이를 지정할 수 있는 블록 컨테이너 요소에만 적용할 수 있습니다.
너비나 높이를 지정할 수 없는 요소는 텍스트가 요소의 영역 밖으로 오버플로우 되지 않기 때문입니다.

위 조건에 만족하면,
text-overflow 속성으로 오버플로우 되어 숨겨진 텍스트를 잘라내거나(clip 값), 말줄임(...) 표시로 대신하거나(ellipsis 값) 할 수 있습니다.

예제

CSS

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

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

HTML

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

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

예제에 대한 상세 설명

위 예제의 구현을 순서대로 설명하겠습니다.

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

HTML

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

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

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

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

CSS 텍스트 영역을 나타내는 <div> 태그의 스타일 설정

div {
    width: 200px;
    border: 2px solid red;
    white-space: nowrap; /* 텍스트가 줄바꿈하지 않고 텍스트 영역을 벗어나도록 */
}

HTML

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

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

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

CSS 텍스트 영역을 나타내는 <div> 태그의 스타일 설정

div {
    width: 200px;
    border: 2px solid red;
    white-space: nowrap; /* 텍스트가 줄바꿈하지 않고 텍스트 영역을 벗어나도록 */
    overflow: hidden; /* 오버플로우된 텍스트를 보여지지 않도록 */
}

HTML

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

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

CSS 텍스트 영역을 나타내는 <div> 태그의 스타일 설정

div {
    width: 200px;
    border: 2px solid red;
    white-space: nowrap; /* 텍스트가 줄바꿈하지 않고 텍스트 영역을 벗어나도록 */
    overflow: hidden; /* 오버플로우된 텍스트를 보여지지 않도록 */
    text-overflow: ellipsis; /* 생략 부호를 표시 */
}

HTML

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

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

주의할 점

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

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