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>
'웹스토리 > Jquery,Js' 카테고리의 다른 글
Jquery 달력 - datepicker 옵션 (0) | 2013.05.31 |
---|---|
Jquery image gallery - AD Gallery (0) | 2013.05.27 |
ajax form 처리 (0) | 2013.04.30 |
JQuery Select Box 제어 (0) | 2013.02.06 |
Jqgrid 관련 사이트 (0) | 2013.02.04 |