CSS overflow

text-overflow CSS 속성은 숨겨진 오버플로우 콘텐츠가 사용자에게 어떻게 보여지는지 설정한다. 잘라내거나, 줄임표(‘…’)로 표시하거나, 맞춤 문자열을 표시할 수 있다.

text-overflow: clip;
text-overflow: ellipsis;
text-overflow: "-";
text-overflow: "";

text-overflow 속성으로는 오버플로우가 발생하지 않는다. 텍스트가 컨테이너에 넘치게 하려면 다른 CSS 속성(오버플로 및 화이트 스페이스)을 설정해야 한다. 인라인 진행 방향으로 블록 컨테이너 요소를 넘치고 있는 내용에만 영향을 미친다(예: 상자 하단에 텍스트가 넘치는 것은 아님).

overflow: hidden;
white-space: nowrap;

문법

하나 또는 두 개의 값을 사용하여 지정할 수 있다. 하나의 값이 주어지면, 선의 끝에 대해 오버플로우 동작을 지정한다.

값

clip

속성의 기본값. 키워드 값은 내용 영역의 한도에서 텍스트를 잘라서 문자 중간에 잘릴 수 있다. 문자 간 전환 시 클립으로 텍스트 오버플로(text-overflow: '';)를 대상 브라우저에서 지원하는 경우 빈 문자열로 지정할 수 있다.

ellipsis
이 키워드 값은 잘린 텍스트를 나타내는 줄임표(‘…’, U+2026 수평 줄임표)를 표시한다. 내용 영역 내에 줄임표가 표시되어 표시되는 텍스트의 양을 감소시킨다. 타원을 표시할 공간이 충분하지 않으면 잘린다.

string

잘린 텍스트를 나타내는 데 사용된다. 문자열은 내용 영역 내에 표시되며, 표시되는 텍스트의 크기를 줄인다. 문자열 자체를 표시할 공간이 부족하면 잘린다.

fade

넘쳐나는 인라인 콘텐츠를 클립하고 가장자리에 완전한 투명도를 가진 라인 박스 가장자리 근처에 페이드 아웃 효과를 적용한다.

fade(<length>/<percentage>)

넘치는 인라인 콘텐츠를 클립으로 고정하고 가장자리에 완전한 투명도를 가진 라인 박스 가장자리 근처에 페이드 아웃 효과를 적용한다.

[ clip | ellipsis | <string> ]{1,2}

---

REFERENCE
https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow#fade(%20%3Clength%3E%20|%20%3Cpercentage%3E%20)