CSS 말줄임표(...) div 와 table 에 적용하기
Tip 2010. 9. 1. 23:06 |http://rabbitchris.tistory.com/431
*. DIV 나 SPAN
→ DIV 와 SPAN 의 style 속성에 text-overflow:ellipsis; overflow:hidden 두가지를 병행하여 사용.
→ 그리고 DIV 와 SPAN 태그 안에 <nobr> 태그를 사용.
해석을 하면 말 그대로, 텍스트가 넘치는 상황에서 ellipsis 생략 처리, 넘친 부분은 hidden 안보임 처리.
nobr 은 처음 보나요..? <br> 태그는 많이 봤죠..? <br> 이 행을 바꾸라는 것이라면 <nobr> 은 행을 바꾸지 말라는 것.
파워포인트에서 '도형 안에 글자넣기' 옵션이 켜지면 폭을 넘어서는 글내용이 들어갈때 자동으로 개행되져..?
이걸 하지 못하도록 한 것. 스타일 속성에서 overflow 처리를 하여도 <nobr> 태그가 없으면 말줄임표는 꽝.
text-overflow:clip 이라든가, overflow:visible 이라고 하면 안됩니다.
뭐, 사용하면 오류가 난다는 것이 아니라 말줄임표가 안 붙는다는 것.
그리고, 이렇게 해도 div 의 width 보다 작은 내용은 말줄임표가 붙지 않습니다.
아래 예제에서는 <br> 태그를 중간에 사용했는데 <br> 을 전후로 각자 말줄임표가 사용됩니다.
<div style="width:200; text-overflow:ellipsis; overflow:hidden">
<nobr>폭이 기다란 샘플을 사용해 주세요. <br>폭이 기다란 샘플을 사용해 주세요.</nobr>
</div>
*. TABLE
→ table 에는 table-layout:fixed 사용
→ td 에는 text-overflow:ellipsis; overflow:hidden 사용
overflow 에 관한 설명은 위에서 했고, table 레이아웃을 fixed 고정 처리.
만약 이렇게 했는데도 밀려난다면 td 태그 안에 <nobr> 사용
그리고, 이렇게 해도 td 의 width 보다 작은 내용은 말줄임표가 붙지 않습니다.
<table style="table-layout:fixed">
<tr>
<td width="100" style="text-overflow:ellipsis; overflow:hidden"><nobr>1. 폭이 기다란 샘플을 사용<nobr></td>
<td width="100" style="text-overflow:ellipsis; overflow:hidden"><nobr>2. 폭이 기다란 샘플을 사용<nobr></td>
<td width="100" style="text-overflow:ellipsis; overflow:hidden"><nobr>3. 폭이 기다란 샘플을 사용<nobr></td>
</tr>
</table>
*. TABLE 의 TD 안에서 DIV 나 SPAN
뭐, 기본적으로 DIV 나 SPAN 에서의 말줄임표 사용방법과 동일합니다.
*. 그리고, 추가로 말줄임표를 사용했다면 반드시 title 속성을 사용하여 말풍선을 넣어 주세요.
속성으로 들어가다 보니 내용에 인용부호가 있으면 틀이 깨어지므로 내용에서 인용부호를 빼 주어야 합니다.
아래 예제는 JSP 를 들어 설명하였습니다. 다른 언어는 알아서 구현하세요..
<div style="width:200; text-overflow:ellipsis; overflow:hidden" title="<%= string.replaceAll("\"","") %>">
<nobr>폭이 기다란 샘플을 사용해 주세요. <br>폭이 기다란 샘플을 사용해 주세요.</nobr>
</div>
'Tip' 카테고리의 다른 글
| 크로스도메인 쿠키문제 (0) | 2011.01.21 |
|---|---|
| MySql insert select (0) | 2010.11.06 |
| div가운데 정렬 (0) | 2010.10.09 |
| 말풍선 그럴싸한거 (0) | 2010.09.26 |
| JSP 달력 만들기 (0) | 2010.09.10 |