text-overflow - 긴 문장 줄여주는 CSS 스타일링

예전엔 프로그램단에서 str_cut() 등의 함수를 만들어 긴 제목등의 문장을 줄인 뒤에 "..."를 붙여 구현했던 기능.

 

현재는 CSS의 text-overflow 속성으로 처리를 합니다.

 

 

 

 

 

- 지원 브라우저

 

 

 

 

IE6~9를 필두로 거의 모든 브라우저가 이 속성을 지원합니다. (파이어폭스는 7 버전 이후부터 지원)

 

 

 

 

 

-  Syntax (구문) 

 

text-overflow: clip;

text-overflow: ellipsis;

text-overflow: string;

 

clip 은 잘라내고,

ellipsis 는 문자열 뒤에 "..."를 붙여줍니다.

string 은  text-overflow:"..."; 형식으로 커스텀 대체문자를 붙여줍니다.

B.U.T

3가지 속성값이 존재하지만 string 값 지정 (ex "...")과 text-overflow:clip "..."; 같은 하나 이상의 조합은 FF9(파이어폭스9) 에서만 지원합니다.

현재까진 clip 과 ellipsis 중 하나만 선택할 수 있습니다.

 

 

 

 

 

- 적용시 알아두어야 할 것들

 

하나,

문자열을 줄이는 대다수의 이유는 고정되고 제한된 공간을 유지하며 적절한 텍스트 표현을 하기 위한 것이기에

적용시에는 해당 영역의 width 가 고정폭인 조건이어야 합니다.

 

 

둘,

ellipsis 사용시 CSS 지정 글꼴(Font)과 브라우저에 따라 표현되는 방식에 차이가 있습니다.

통상적으로 "..." 처럼 하단에 깔려야 하지만 대부분의 브라우저에서 중앙 "---" 영역에 노출됩니다. 

개인적으로 확인은 못했지만 "맑은 고딕"(웹폰트가 되겠지요?) 글꼴 사용시 대부분의 브라우저에서 우리가 원하는 결과를 얻을 수 있다고 합니다.

기본 글꼴(돋움,굴림 등)로 "..." 표시를 중앙(middle)영역이 아닌 하단(bottom)에 표시하고자 한다면 프로그램단에서 처리하는 것이 효율적입니다. 

 

 

셋,

적용시에는 아래 두 속성도 함께 넣어줍니다.

div#title { width:200px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;  }

 

overflow:hidden;

고정폭을 넘어가는 text를 숨기고

white-space:nowrap;

고정폭이라도 자동 줄바꿈이 되지 않도록 합니다.

text-overflow:ellipsis; 

고정폭을 넘을 경우 "..."를 붙여줍니다.

참고 URL

https://developer.mozilla.org/en-US/docs/CSS/text-overflow

http://quirksmode.org/css/user-interface/textoverflow.html

http://blog.naver.com/PostView.nhn?blogId=goodleedw&logNo=30151600912

http://www.w3schools.com/cssref/css3_pr_text-overflow.asp

 

출처 : http://blog.naver.com/mickeyh21/10163725143