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

*. DIV 나 SPAN
 → DIV 의 style 속성에 text-overflow:ellipsis; overflow:hidden 두가지를 병행하여 사용.
 → DIV 의 style 속성에 white-space:nowrap 를 사용하거나 div 태그 안에 <nobr> 태그를 사용.
 → span 태그 안에서는.. IE 에선 div 랑 같은데, Chrome 에선 말줄임 기능이 먹지 않네요..

    텍스트가 넘치는 상황에서 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; white-space:nowrap">    폭이 기다란 샘플을 사용해 주세요. <br>폭이 기다란 샘플을 사용해 주세요. </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>