text-overflow 속성

text-overflow 속성은 텍스트가 블록에 맞지 않아 잘렸음을 나타내는 기호로, 잘린 텍스트 끝에 줄임표를 추가합니다.

이 속성이 작동하려면 텍스트가 overflow 속성 또는 overflow-x 속성을 hidden, auto 또는 scroll 값으로 설정하여 잘려야 합니다. visible (기본값)으로 설정된 경우 - text-overflow 속성은 작동하지 않습니다.

구문

선택자 {
	text-overflow: ellipsis | clip;
}

값

값	설명
`ellipsis`	잘린 텍스트 끝에 줄임표를 추가합니다.
`clip`	줄임표를 추가하지 않습니다 (기본값이며, 필요시 속성의 동작을 취소하는 데 사용됩니다).

기본값: clip.

예제 . 넘치는 텍스트

이 예제에서 아주 긴 단어는 컨테이너에 맞지 않아 경계를 벗어납니다. 텍스트가 잘리지 않습니다:

<div id="elem">
	Lorem ipsum dolor sit amet
	loooooooooooooooooooooooooooooooongword,
	consectetur loooooooooooooooooooooooooooooooongword
	adipiscing elit.
</div>

#elem {
	width: 200px;
	overflow: visible;
	border: 1px solid red;
}

예제 . overflow 속성 추가하기

이제 컨테이너 경계를 벗어나는 모든 부분은 단순히 잘립니다:

<div id="elem">
	Lorem ipsum dolor sit amet
	loooooooooooooooooooooooooooooooongword,
	consectetur loooooooooooooooooooooooooooooooongword
	adipiscing elit.
</div>

#elem {
	width: 200px;
	overflow: hidden;
	border: 1px solid red;
}

예제 . ellipsis 값

이제 overflow 속성에 더해 text-overflow 속성을 ellipsis 값으로 추가합니다. 잘린 텍스트 끝에 줄임표가 추가됩니다:

<div id="elem">
	Lorem ipsum dolor sit amet
	loooooooooooooooooooooooooooooooongword,
	consectetur loooooooooooooooooooooooooooooooongword
	adipiscing elit.
</div>

#elem {
	width: 200px;
	overflow: hidden;
	text-overflow: ellipsis;
	border: 1px solid red;
}

예제 . 스크롤 막대와 함께

overflow: auto와 text-overflow: ellipsis를 설정하면 스크롤 막대가 나타나지만, 줄임표는 계속 추가됩니다. 예제에서 스크롤 막대를 스크롤해 보세요:

<div id="elem">
	Lorem ipsum dolor sit amet
	loooooooooooooooooooooooooooooooongword,
	consectetur loooooooooooooooooooooooooooooooongword
	adipiscing elit.
</div>

#elem {
	width: 200px;
	overflow: auto;
	text-overflow: ellipsis;
	border: 1px solid red;
}

예제 . 아주 긴 단어가 없는 경우

컨테이너 경계를 벗어날 만큼 긴 단어가 없다면 텍스트가 잘리지 않습니다 (벗어나는 것이 없으므로). 다음 예제를 확인하세요:

<div id="elem">
	Lorem ipsum dolor sit amet adipiscing elit.
</div>

#elem {
	width: 200px;
	overflow: hidden;
	text-overflow: ellipsis;
	border: 1px solid red;
}

예제 . 한 줄 텍스트

그러나 텍스트가 너무 길면 (개별 단어가 아니라 텍스트 전체가) 잘리고 다음 줄로 넘어가지 않도록 하고 싶은 상황이 있습니다. 이는 white-space 속성을 nowrap 값으로 추가하여 텍스트 줄 바꿈을 금지함으로써 가능합니다. 예제를 보면 이제 텍스트가 잘립니다:

<div id="elem">
	Lorem ipsum dolor sit amet adipiscing elit.
</div>

#elem {
	width: 200px;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	border: 1px solid red;
}

예제 . 퍼센트 너비

블록 너비를 %로 설정해도 텍스트 잘림은 올바르게 작동합니다:

<div id="elem">
	Lorem ipsum dolor sit amet
	loooooooooooooooooooooooooooooooongword,
	consectetur loooooooooooooooooooooooooooooooongword
	adipiscing elit.
</div>

#elem {
	width: 80%;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	border: 1px solid red;
}

함께 보기

긴 단어의 글자를 새 줄로 끊을 수 있게 해주는 word-break 속성과 overflow-wrap 속성
단어를 음절별로 줄 바꿈할 수 있게 해주는 hyphens 속성
블록 경계를 벗어나는 부분을 자르는 overflow 속성