텍스트 말줄임

 

1.말 줄임 예제

Text-overflow:ellipsis

이런 불편한 사실을 파악한 호콘 비움 리(?)는 text-overflow-mode를 제안합니다.

글자의 넘침을 CSS box 모델을 기준으로 CSS로 쉽게 구현할 수 있도록 CSS 3.0에 제안합니다.

해당 속성을 간단히 살펴보면

2003년도 처음 CSS Text3 모듈에 처음 정의(text-overflow-mode)된 후 각 브라우저 밴더들이 지원을 시작하여

FF를 제외한 나머지 브라우저들은 해당 속성을 지원합니다.

현재 CSS3 Text 3 WD에서는 text-overflow로 정의하고 있습니다.

clip | ellipsis | string

3가지 값을 가지며 default는 clip 입니다.

block 엘리먼트에만 적용되며 IE6을 위해 width속성이 필요하며,

오페라는 브라우저 한정속성(v 10.7부터 정식지원)으로 지원하고 있습니다.

(새롭게 알게된건 string 도 text-overflow의 value라는 점입니다. 마침표를 기준으로 줄바꿈을 할 수도 있네요.)

CSS 적용 예

p{

white-space: nowrap;
width: 100%; /* IE6 needs any width */
overflow: hidden; /* "overflow" value must be different from "visible" */
-o-text-overflow: ellipsis; /* Opera under 10.7 */
text-overflow: ellipsis; /* IE, Safari */
}

 

2.가변적 테이블 말 줄임 예제

div 영역 넓이가 가변적으로 변경되면서 말줄입 처리가 됨

 .ellipsis{
     white-space:nowrap;
     text-overflow:ellipsis;     /* IE, Safari */
     -o-text-overflow:ellipsis;      /* Opera under 10.7 */
     overflow:hidden;            /* "overflow" value must be different from "visible" */
     -moz-binding: url('ellipsis.xml#ellipsis');
 } 

<table border="1" width="100%" style="table-layout:fixed;">
     <tr>
         <td width="60%">
             <div class="ellipsis" style="width:100%;">
                  문자 줄임말 테스트 영역 입니다문자 줄임말 테스트 영역 입니다문자 줄임말 테스트 영역 입니다문자 줄임말 테스트 영역 입니다문자 줄임말 테스트 영역 입니다                                   

         </div>
     </td>
     <td width="40%">2013.07.09</td>
 </tr>

</table>