테이블 Td나 Div에 문자열이 길 경우 말줄임표 기능 표현

white-space:nowrap : 줄바꿈 방지

overflow:hidden : 글자자름

text-overflow:ellipsis : 말줄임표(...) 표시

title : 말풍선 표시

nobr : 줄을 바꾸지 않음. html 공식 태그가 아님 쓰지 않는것을 추천(하지만 위 속성이 적용안될때가 있음 ㅜ.ㅜ)

 

<div style="width:200px; text-overflow:ellipsis; overflow:hidden; white-space:nowrap;" title="문자열이 길 경우 말줄임표를 사용하여 보여주고 마우스를 글자위에 올리면 title 속성을 이용하여 말풍선으로 전체 문자열을 보여줍니다.">
 문자열이 길 경우 말줄임표를 사용하여 보여주고 마우스를 글자위에 올리면 title 속성을 이용하여 말풍선으로 전체 문자열을 보여줍니다.
</div>

 

* 결과

문자열이 길 경우 말줄임표를 사용하여 보여주고 마우스를 글자위에 올리면 title 속성을 이용하여 말풍선으로 전체 문자열을 보여줍니다.

 

<table border="1" style="table-layout:fixed" width="300">
 <tr>
  <td width="100">Start</td>
  <td width="200" style="text-overflow:ellipsis; overflow:hidden; white-space:nowrap;" title="문자열이 길 경우 말줄임표를 사용하여 보여주고 마우스를 글자위에 올리면 title 속성을 이용하여 말풍선으로 전체 문자열을 보여줍니다.">
   <nobr>문자열이 길 경우 말줄임표를 사용하여 보여주고 마우스를 글자위에 올리면 title 속성을 이용하여 말풍선으로 전체 문자열을 보여줍니다.</nobr>
  </td>
 </tr>
</table>

 

* 결과

Start

문자열이 길 경우 말줄임표를 사용하여 보여주고 마우스를 글자위에 올리면 title 속성을 이용하여 말풍선으로 전체 문자열을 보여줍니다.