CSS 텍스트 오버플로 속성

text-overflow 속성 사용:

div {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

아래에서 더 많은 "직접 사용해 보기" 예를 살펴보세요.

정의 및 사용

속성 은 text-overflow표시되지 않는 넘친 콘텐츠가 사용자에게 어떻게 신호되어야 하는지를 지정합니다. 잘리거나 줄임표(...)를 표시하거나 사용자 지정 문자열을 표시할 수 있습니다.

텍스트 오버플로에는 다음 속성이 모두 필요합니다.

표의 숫자는 속성을 완전히 지원하는 첫 번째 브라우저 버전을 지정합니다.

-o- 뒤에 오는 숫자는 접두사와 함께 작동한 첫 번째 버전을 지정합니다.

Property
text-overflow	4.0	6.0	7.0	3.1	11.0 9.0 -o-

text-overflow: clip|ellipsis|string|initial|inherit;

Value	Description	Play it
clip	Default value. The text is clipped and not accessible
ellipsis	Render an ellipsis ("...") to represent the clipped text
string	Render the given string to represent the clipped text
initial	Sets this property to its default value. Read about initial
inherit	Inherits this property from its parent element. Read about inherit

호버 효과가 있는 텍스트 오버플로(호버 시 전체 텍스트 표시):

div.a {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

div.a:hover {
  overflow: visible;
}