<nobr style="text-overflow:ellipsis; overflow:hidden; width:200px" title="말풍선에 나올 내용">잘려질 내용 잘려질 내용 잘려질 내용 잘려질 내용</nobr>
ellipsis-word
<nobr style="text-overflow-mode:ellipsis-word ;overflow:hidden; white-space: nowrap; width:200px" title="말풍선에 나올 내용">잘려질 내용 잘려질 내용 잘려질 내용 잘려질 내용</nobr>
clip
<nobr style="text-overflow:clip;overflow:hidden;width:200px">잘려질 내용 잘려질 내용 잘려질 내용 잘려질 내용</nobr>
inherit
<nobr style="text-overflow:inherit;overflow:hidden;width:200px">잘려질 내용 잘려질 내용 잘려질 내용 잘려질 내용</nobr>
링크에 넣을 경우
<nobr style="text-overflow:ellipsis;overflow:hidden;width=280px;cursor:Hand">잘려질 내용 잘려질 내용 잘려질 내용 잘려질 내용</nobr>
ex)))테이블에 넣었을 경우
<table width='200' border='0' cellpadding='0' cellspacing="0" style='table-layout:fixed;' cellspace='0'>
<tr>
<td><nobr style="text-overflow:ellipsis;width:200px;overflow:hidden"> 200px로 잘리는 테이블에 넣었을시 보이는</nobr>
</td>
</tr>
</table>
ex)))링크에 걸기 예2
<nobr class="nobr" style="width:120px;"><a href="javascript
------------------------------------------------------------------------------------
#example1 {text-overflow-mode: clip; width: 200px; overflow:hidden;white-space : nowrap; }
#example2 {text-overflow-mode: ellipsis; width: 200px; overflow:hidden;white-space : nowrap; }
#example3 {text-overflow-mode: ellipsis-word; width: 200px; overflow:hidden;white-space : nowrap; }
------------------------------------------------------------------------------------
[ white-space ]
요소 안에서의
띄어쓰기와 같은 빈 공간을 조절할 때 사용합니다.
white-space에 사용되는 값
normal : 줄 바꿈 디볼트 값을 유지합니다.
pre : 문서 소스에 서식을 할당해서 문서가 표시되게 합니다.
nowrap : 요소 내에서 줄바꿈이 되지 않습니다.
예제
H1 {white-space: nowrap}
H1에서의 줄바꿈을 하지 않도록 설정합니다.
[출처] text-overflow|작성자 알사장
'DEV > html/css/js/img' 카테고리의 다른 글
| 요청과 동시에 자바스크립트가 실행되게 하기 위해서는..? (0) | 2009.01.06 |
|---|---|
| prototype.js에서 setStyle() 사용하기 (0) | 2008.12.29 |
| [javascript]마우스 이벤트 & 키보드 이벤트 (0) | 2008.12.24 |
