CSS 말줄임표(...) div 와 table 에 적용하기

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>