CSS의 text-overflow 속성은 텍스트가 요소의 상자를 오버플로 할 때 텍스트가 잘리는 상황을 처리합니다. 잘라내거나 (잘라내거나, 숨길 수 있음) 줄임표 ( …, 유니 코드 범위 값 U + 2026)를 표시하거나 작성자가 정의한 문자열을 표시 할 수 있습니다 (현재 브라우저에서 작성자가 정의한 문자열을 지원하지 않음).
text-overflow는 컨테이너의 overflow 속성에 값이있는 경우에만 발생합니다. hidden, scroll 또는 auto 및 white-space: nowrap;.
텍스트 오버 플로우는 블록 또는 인라인 블록 레벨 요소에서만 발생할 수 있습니다. 요소가 오버 플로우되기 위해서는 너비가 있어야하기 때문입니다. 오버플로는 방향 속성 또는 관련 속성에 의해 결정된 방향으로 발생합니다.
다음 데모는 가능한 모든 값을 포함하여 text-overflow 속성의 동작을 보여줍니다. 브라우저 지원은 다양합니다!
설정 overflow에서 scroll 또는 auto는 스크롤바를 표시하여 추가 텍스트를 표시하고 hidden는 그렇지 않습니다. 숨겨진 텍스트는 줄임표를 선택하여 선택할 수 있습니다.
Old Stuff
이전 버전의 사양에서는 줄임표에 대한 이미지에 대한 URL을 사용할 수 있지만 다음과 같이 보입니다. 삭제 된 경우
두 값 구문이 있습니다. text-overflow: ellipsis ellipsis;, 동일한 컨테이너의 왼쪽과 오른쪽에서 오버플로를 제어합니다. 어떻게 이룰 수 있을지 모르겠습니다. 너무 작은 컨테이너의 중앙 텍스트일까요? 새로운 사양에는 문자열 정의뿐만 아니라 이것이 “위험”하다고 나와 있습니다.
ellipsis-word의 출처가 어디인지 모르겠습니다. 사양 또는 WebPlatform.org 이외의 다른 문서에 있습니다.
text-overflow 속성은 및 text-overflow-ellipsis, 더 이상 존재하지 않으며 이러한 개별 속성이 존재하지 않습니다.
관련 속성
-
white-space -
overflow -
word-break -
width