text-overflow

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

* Some parts of this feature may have varying levels of support.

text-overflow CSS 속성은 숨겨진 넘치는 콘텐츠를 사용자에게 어떻게 표시할지 설정합니다. 이는 말줄임표 (…)를 표시하여 생략되거나, 사용자 지정 문자열로 대체될 수 있습니다.

시도해보기

text-overflow 속성은 넘침을 유발하지는 않습니다. 컨테이너에서 텍스트가 넘치게 하려면 overflow 나 white-space 와 같은 다른 CSS 속성들을 적용해야 합니다. 아래는 예시입니다.

css

overflow: hidden;
white-space: nowrap;

text-overflow 속성은 블록 컨텐이너 요소에서 인라인 진행 방향으로 넘치는 콘텐츠에만 영향을 미칩니다. (예시로, 박스 하단에서 넘치는 텍스트에는 영향을 주지 않습니다.)

구문

css

text-overflow: clip;
text-overflow: ellipsis ellipsis;
text-overflow: ellipsis " [..]";

/* 전역 값 */
text-overflow: inherit;
text-overflow: initial;
text-overflow: revert;
text-overflow: revert-layer;
text-overflow: unset;

text-overflow 속성은 한 개 혹은 두 개의 값을 이용하여 설정할 수 있습니다. 만일 한 개의 값이 주어진다면 이는 줄의 끝부분 (왼쪽에서 오른쪽으로 읽는 텍스트라면 오른쪽, 오른쪽에서 왼쪽으로 읽는 텍스트라면 왼쪽)에서 넘침을 설정합니다. 두 개의 값이 주어진다면 첫번째 값은 줄의 왼쪽 끝부분을, 두번째 값은 줄의 오른쪽 끝부분의 넘침을 설정합니다. 이 속성은 키워드 값 (clip 혹은 ellipsis) 또는 문자열 값을 허용합니다.

값

clip: 이 속성의 기본 값입니다. 이 키워드 값은 콘텐츠 영역 의 한계에서 텍스트를 자릅니다. 그렇기 때문에 문자열 중간에서 줄바꿈이 일어날 수 있습니다. text-overflow: ''; 가 브라우저에서 지원된다면, 빈 문자열로 text-overflow 를 설정하여 문자열과 문자열 사이에서 잘리도록 할 수 있습니다.
ellipsis: 이 키워드는 말줄임표 ('…', U+2026 HORIZONTAL ELLIPSIS) 를 잘린 텍스트에 대치합니다. 말줄임표는 콘텐츠 영역 안에서 표시되고, 표시되는 텍스트의 양을 줄입니다. 말줄임표를 표시할 여유 공간이 없다면 이 역시 생략됩니다.
문자열: 문자열 은 생략된 텍스트를 나타내는 데에 사용됩니다. 문자열은 콘텐츠 영역 안에서 표시되고, 표시되는 텍스트의 길이를 줄입니다. 문자열을 표시할 여유 공간이 없다면 이 역시 생략됩니다.

형식 정의

초기값	`clip`
적용대상	block container elements
상속	no
계산 값	as specified
Animation type	discrete

형식 구문

text-overflow = 
  clip      |
  ellipsis

예제

단일 값 구문

이 예제는 text-overflow 가 왼쪽에서 오른쪽으로 읽는 텍스트 단락과, 오른쪽에서 왼쪽으로 읽는 단락에서 다른 값이 적용됨을 보여줍니다.

HTML

html

<div class="ltr">
  <h2>왼쪽에서 오른쪽으로 읽는 텍스트</h2>
  <pre>clip</pre>
  <p class="overflow-clip">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  </p>
  <pre>ellipsis</pre>
  <p class="overflow-ellipsis">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  </p>
  <pre>" [..]"</pre>
  <p class="overflow-string">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  </p>
</div>

<div class="rtl">
  <h2>오른쪽에서 왼쪽으로 읽는 텍스트</h2>
  <pre>clip</pre>
  <p class="overflow-clip">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  </p>
  <pre>ellipsis</pre>
  <p class="overflow-ellipsis">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  </p>
  <pre>" [..]"</pre>
  <p class="overflow-string">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  </p>
</div>

CSS

css

p {
  width: 200px;
  border: 1px solid;
  padding: 2px 5px;

  /* 아래 두 속성은 text-overflow의 필수값입니다. */
  white-space: nowrap;
  overflow: hidden;
}

.overflow-clip {
  text-overflow: clip;
}

.overflow-ellipsis {
  text-overflow: ellipsis;
}

.overflow-string {
  text-overflow: " [..]";
}

body {
  display: flex;
  justify-content: space-around;
}

.ltr > p {
  direction: ltr;
}

.rtl > p {
  direction: rtl;
}

결과

두 개의 값 구문

아래는 text-overflow 의 두 개의 값 구문에 대한 예제이며, 텍스트의 시작과 끝 부분에 대해 서로 다른 넘침을 정의할 수 있습니다.

효과를 보여주기 위해서는 텍스트의 시작 부분도 숨겨지도록 줄을 스크롤해야 합니다.

HTML

html

<pre>clip clip</pre>
<p class="overflow-clip-clip">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</p>
<pre>clip ellipsis</pre>
<p class="overflow-clip-ellipsis">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</p>
<pre>ellipsis ellipsis</pre>
<p class="overflow-ellipsis-ellipsis">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</p>
<pre>ellipsis " [..]"</pre>
<p class="overflow-ellipsis-string">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</p>

CSS

css

p {
  width: 200px;
  border: 1px solid;
  padding: 2px 5px;

  /* 아래 두 속성은 text-overflow의 필수값입니다. */
  white-space: nowrap;
  overflow: scroll;
}

.overflow-clip-clip {
  text-overflow: clip clip;
}

.overflow-clip-ellipsis {
  text-overflow: clip ellipsis;
}

.overflow-ellipsis-ellipsis {
  text-overflow: ellipsis ellipsis;
}

.overflow-ellipsis-string {
  text-overflow: ellipsis " [..]";
}

JavaScript

// 단락을 스크롤하여 시작 부분을 숨겨보세요.
const paras = document.querySelectorAll("p");

for (const para of paras) {
  para.scroll(100, 0);
}

결과

명세서

Specification
CSS Overflow Module Level 3 # text-overflow
Scalable Vector Graphics (SVG) 2 # TextOverflowProperty

이 인터페이스의 이전 버전은 Candidate Recommendation 상태에 도달했습니다. 위험 목록에 없던 일부 기능들을 제거해야 했기 때문에, 명세는 작업 초안 수준으로 강등되었습니다. 이는 브라우저들이 CR 상태가 아님에도 불구하고 이 속성을 접두사 없이 구현한 이유입니다.

브라우저 호환성

Report problems with this compatibility data on GitHub

	desktop					mobile
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari on iOS	Samsung Internet	WebView Android	WebView on iOS
`text-overflow`
`clip`
`ellipsis`
<string>
Two-value syntax

Tip: you can click/tap on a cell for more information.

Full support: Full support
No support: No support
: See implementation notes.
: Requires a vendor prefix or different name for use.
: Has more compatibility info.

같이 보기

관련 CSS 속성: overflow, white-space
단어의 줄바꿈을 제어하는 CSS 속성들: overflow-wrap, word-break

HTML

CSS

결과

HTML

CSS

JavaScript

결과

Legend