text-overflow
속성 사용법
text-overflow
속성은
블록 컨테이너 요소의 텍스트 영역을 벗어나 줄바꿈하지 않고 오버플로우되어 숨겨진 텍스트가 있는지를 시각적으로 나타내는 생략 부호를 표시할지(예를 들어 ...
) 아니면 그냥 숨겨진 채로 남겨둘지를 설정합니다.
블록 컨테이너 요소란 너비나 높이를 지정할 수 있는 요소를 말합니다.
이 속성은 너비나 높이를 지정할 수 있는 블록 컨테이너 요소에만 적용할 수 있습니다.
너비나 높이를 지정할 수 없는 인라인 요소에는 적용할 수 없습니다.
이 속성은 텍스트의 한 줄 말줄임(...
)을 CSS로 표시하는데 매우 유용합니다.
데모로 이해하기
div {
width: 200px;
border: 2px solid red;
/* 줄바꿈하지 않고 말줄임을 표시하는
방법에 필요한 CSS 속성들 */
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
<div>
텍스트가 콘텐츠 박스의 끝에 도달했을 때
자동으로 줄바꿈하지 않고
오버플로우되는 텍스트는 숨기고
생략 부호(...)를 표시하는
방법에 대해 알아봅니다.
</div>
위 데모의 구현은 text-overflow
속성을 활용한 것입니다.
이 속성의 기능을 알면 텍스트가 한 줄로 되어 있어 줄바꿈하지 않고 말줄임(...
)을 표시하는 방법에 대해 쉽게 이해할 수 있습니다.
text-overflow
속성을 활용하는 방법 상세한 설명
데모의 구현을 순서대로 설명하겠습니다.
- 아무런 설정이 없는 일반적인 텍스트 영역입니다.
<div>
text-overflow 속성은 텍스트 영역을 벗어나
오버플로우되어 숨겨진 텍스트가 있는지를
시각적으로 나타내는 생략 부호를 표시할지
아니면 그냥 숨겨진 채로 남겨둘지를 설정합니다.
</div>
- 데모에서 공통으로 사용할 텍스트 영역을 나타내는 <div> 태그의 공통 스타일 설정하겠습니다.
div {
width: 200px;
border: 2px solid red;
}
일반적인 텍스트 영역은 위의 실제 적용된 모습을 보면 알 수 있듯이 텍스트가 콘텐츠 박스의 끝에 도달했을 때 자동으로 줄바꿈시킵니다.
- 텍스트가 줄바꿈하지 않고 텍스트 영역을 벗어나도록(오버플로우되도록)
white-space: nowrap
을 설정하였습니다.
<div style="white-space: nowrap;">
text-overflow 속성은 텍스트 영역을 벗어나
오버플로우되어 숨겨진 텍스트가 있는지를
시각적으로 나타내는 생략 부호를 표시할지
아니면 그냥 숨겨진 채로 남겨둘지를 설정합니다.
</div>
white-space
속성은 요소 내부의 공백 문자(Whitespace) 처리와 줄바꿈 규칙을 설정합니다. white-space: nowrap
으로 지정하면 텍스트가 콘텐츠 박스의 끝에 도달했을 때 자동으로 줄바꿈시키던 것을 자동으로 줄바꿈시키지 않습니다. 즉 텍스트가 텍스트 영역을 벗어나 오버플로우됩니다.
- 오버플로우된 텍스트를 보여지지 않도록
overflow: hidden
으로 숨기겠습니다.
<div style="white-space: nowrap; overflow: hidden;">
text-overflow 속성은 텍스트 영역을 벗어나
오버플로우되어 숨겨진 텍스트가 있는지를
시각적으로 나타내는 생략 부호를 표시할지
아니면 그냥 숨겨진 채로 남겨둘지를 설정합니다.
</div>
- 텍스트 영역을 벗어나 오버플로우되어 숨겨진 텍스트를
text-overflow
속성으로 생략 부호를 표시하겠습니다.
<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
속성의 형식은 다음과 같습니다.
형식 구문
selector {
text-overflow: clip 또는 ellipsis
}
형식 정의
초깃값 | clip |
---|---|
적용 요소 | 해당 요소가 너비나 높이를 지정할 수 있는 블록 컨테이너 요소 |
상속 | 아니오 |
애니메이션 | 아니오 |
값
clip |
초깃값임.
생략 부호를 표시하지 않습니다. |
---|---|
ellipsis |
생략 부호를 표시합니다. 생략 부호는 줄임표 문자(U+2026, HORIZONTAL ELLIPSIS)인 ... 입니다. |
구문
-text-overflow
속성 값 예시
/* 키워드 값 */
text-overflow: clip;
text-overflow: ellipsis;
/* 글로벌 값 */
text-overflow: inherit;
text-overflow: initial;
text-overflow: revert;
text-overflow: revert-layer;
text-overflow: unset;
브라우저 호환
속성 |
데스크탑 Chrome
|
데스크탑데스크탑 Edge
|
데스크탑 Firefox
|
Safari
|
---|---|---|---|---|
text-overflow
|
1 | 12 | 7 | 1.3 |
명세서
명세서 사양 | |
---|---|
text-overflow
|
CSS Overflow Module Level 3 #text-overflow |