text-overflow

text-overflow

정의

• 텍스트가 영역을 넘쳤을 경우 생략기호로 보여주는 속성이다.

• 자르거나, ...으로 표시하거나 사용자가 지정한 텍스트로 대치 할 수 있다

속성 종류

clip

기본 값. 이 키워드 값은 텍스트 영역의 한계에서 텍스트를 자르기 때문에 문자 중간에 잘림 현상이 발생할 수 있다. 

ellipsis

이 키워드 값은 '...'을 표시한다. '...'은 잘린 텍스트를 나타낸다. 내용 영역 내부에 '...'이 표시되어 표시되는 텍스트의 양이 감소한다. '...'을 표시할 공간이 충분하지 않으면 잘린다.

<string> 

<string>은 넘치는 인라인 콘텐츠를 잘라 지정한 텍스트로 대치한다. 문자열은 내용 영역 내부에 표시되며, 표시되는 텍스트의 크기를 줄인다. 문자열 자체를 표시할 공간이 부족하면 잘린다.

fade

이 키워드는 넘치는 인라인 콘텐츠를 잘라 행의 가장자리에 fade out 효과를 적용한다.

fade( <length | <percentage> )

이 함수는 overflow되는 인라인 콘텐트를 잘라내고 가장자리에 fade out 효과를 주는 함수이다. 매개변수는 fade out 효과가 적용되는 길이를 결정한다. <percentage>는 상자의 폭의 비율이다. 0보다 작은 값은 0으로 잘린다. 행의 너비보다 큰 값은 행의 너비로 잘린다.

text-overlfow 속성은 한개 또는 두개의 값을 지정할 수 있다. 

하나의 값이 주어지면 행의 끝의 오버플로우 동작을 지정한다.

두 값이 주어지면 첫 번째 값은 행의 왼쪽 끝에 대한 overflow 동작을 지정하고, 두 번째 값은 행의 오른쪽 끝에 대해 overflow 동작을 지정한다.

지원하는 브라우저 

text-overflow 실습

test browser :  FireFox

https://codepen.io/jeonsol/pen/QoKamj?editors=1100