긴 문장을 생략해주는 text-overflow 속성

 text-overflow속성

한 부분에 글을 적을때 내용이 너무 길어서 영역을 넘어가게되면 '...'와 같은 생략기호를 붙혀 긴 문장을 text-overflow 속성을 통해 줄여줄 수 있습니다. text-overflow속성은 IE6이후로 모든 브라우저에 지원이 되는데 파이어폭스의 경우 7버젼 이후부터 지원이 됩니다. 

text-overflow: clip; text-overflow: ellipsis; text-overflow: string;

위의 소스처럼 clip, ellipsis, string 3가지가 있는데

clip의 경우 영역을 넘은 문자열을 잘라내는 역활을 합니다

ex) 가나다라마바사 → 가나다라

ellipsis의 경우 영역을 넘은 문자열 뒤에 '..'를 붙여주는 역활을 합니다

ex) 가나다라마바사 → 가나다라..

string의 경우는 '...'이 아닌 대체 문자를 붙일 수 있습니다

ex)가나다라마바사 → 가나다라~ ('~'을 대체문자로 지정했을시)

3가지 속성중 하나이상의 조합을 사용하는 경우는 파이어폭스 9이후 버젼으로만 지원이 됩니다.

적용시 반드시 알아두어야 할 조건

1.적용시 반드시 width가 고정폭인 조건이야 합니다.

2.ellpsis를 사용시 CSS글꼴과 브라우저에 따라 표현이 달라지게 됩니다. 

3. 적용시 overflow:hidden; white-space:nowrap; 이 두 속성도 함께 넣어줘야 됩니다.