text-overflow
속성 사용법
text-overflow
속성은
한 줄로 된 텍스트가 요소의 영역 밖으로 오버플로우 되어 숨겨진 텍스트라는 신호로 말줌임(...
)을 표시할지 설정합니다.
text-overflow
속성은 텍스트의 한 줄 말줄임(...
)을 CSS로 표시하는데 매우 유용합니다.
형식 구문
구문
값
clip |
초깃값임.
생략 부호를 표시하지 않습니다. 숨겨진 텍스트를 잘라냅니다. |
---|---|
ellipsis |
생략 부호를 표시합니다. 생략 부호는 줄임표 문자(U+2026, HORIZONTAL ELLIPSIS)인 ... 입니다. |
형식 정의
초깃값 | clip |
---|---|
적용 요소 | 해당 요소가 너비나 높이를 지정할 수 있는 블록 컨테이너 요소 |
상속 | 아니오 |
애니메이션 | 아니오 |
사용법 참고사항
text-overflow
속성을 적용하려면 해당 요소는 다음의 조건을 만족해야 합니다.
- 해당 요소의 텍스트가
white-space
속성의 값이nowrap
처럼 콘텐츠 박스의 끝에 도달했을 때 자동으로 줄바꿈하지 않도록 설정되어 있어야 합니다. overflow: hidden
등으로 텍스트가 오버플로우되면 숨겨지도록 설정되어 있어야 합니다.- 너비나 높이를 지정할 수 있는 블록 컨테이너 요소에만 적용할 수 있습니다.
너비나 높이를 지정할 수 없는 요소는 텍스트가 요소의 영역 밖으로 오버플로우 되지 않기 때문입니다.
위 조건에 만족하면,
text-overflow
속성으로 오버플로우 되어 숨겨진 텍스트를 잘라내거나(clip
값), 말줄임(...) 표시로 대신하거나(ellipsis
값) 할 수 있습니다.
예제
위 예제의 구현은 text-overflow
속성을 활용한 것입니다.
이 속성의 기능을 알면 텍스트가 한 줄로 되어 있어 줄바꿈하지 않고 말줄임(...
)을 표시하는 방법에 대해 쉽게 이해할 수 있습니다.
예제에 대한 상세 설명
위 예제의 구현을 순서대로 설명하겠습니다.
- 아무런 설정이 없는 일반적인 텍스트 영역입니다.
- 예제에서 공통으로 사용할 텍스트 영역을 나타내는
<div>
태그의 공통 스타일 설정하겠습니다.
일반적인 텍스트 영역은 위의 실제 적용된 모습을 보면 알 수 있듯이 텍스트가 콘텐츠 박스의 끝에 도달했을 때 자동으로 줄바꿈시킵니다.
- 텍스트가 줄바꿈하지 않고 텍스트 영역을 벗어나도록(오버플로우되도록)
white-space: nowrap;
을 설정하였습니다.
white-space
속성은 요소 내부의 공백 문자(Whitespace) 처리와 줄바꿈 규칙을 설정합니다. white-space: nowrap
으로 지정하면 텍스트가 콘텐츠 박스의 끝에 도달했을 때 자동으로 줄바꿈시키던 것을 자동으로 줄바꿈시키지 않습니다. 즉 텍스트가 텍스트 영역을 벗어나 오버플로우됩니다.
- 오버플로우된 텍스트를 보여지지 않도록
overflow: hidden;
으로 숨기겠습니다.
- 텍스트 영역을 벗어나 오버플로우되어 숨겨진 텍스트를
text-overflow: ellipsis;
로 생략 부호를 표시하겠습니다.
text-overflow
속성의 값을 ellipsis
로 지정하면 위의 실제 적용된 모습처럼 생략 부호(...
)가 표시됩니다.
주의할 점
text-overflow
속성은 다음의 세 조건이 부합되어야 구현이 가능합니다.
overflow
속성은visible
값이 아니어야 합니다.hidden
이나scroll
또는auto
값으로 적용되어 있어야 합니다.whit-space
속성은 텍스트가 콘텐츠 박스의 끝에 도달했을 때 자동으로 줄바꿈시키던 것을 자동으로 줄바꿈시키지 않게 하는nowrap
이나pre
값으로 적용되어 있어야 합니다.- 그리고, 이 속성들과 값들이 적용되기 위해서는 해당 요소가 너비나 높이를 지정할 수 있는 블록 컨테이너 요소이어야 합니다.
이 세 조건이 부합되지 않으면 해당하는 요소는 text-overflow
속성이 적용되지 않습니다. 이는 당연하게도 이 두 조건 하에서 시각적으로 나타내는 생략 부호를 표시할지를 설정는 속성이기 때문입니다.
텍스트의 줄 수를 제한하여 여러 줄 말줄임(...
) 표시 설정은 -webkit-line-clamp
속성이 유용합니다.
브라우저 호환
속성 |
데스크탑 Chrome
|
데스크탑데스크탑 Edge
|
데스크탑 Firefox
|
Safari
|
---|---|---|---|---|
text-overflow
|
1 | 12 | 7 | 1.3 |
명세서
명세서 사양 | |
---|---|
text-overflow
|
CSS Overflow Module Level 3 #text-overflow |