테이블의 사이즈는 늘었다 줄었다 하는데, td에 white-space:nowrap 들어 간 순간부터
글자대로 테이블이 늘어나기 때문에 말줄임을 할 수가 없어서 div를 추가하여 작업을 하기로 하였다.
<table>
<tr>
<th><div class="txtBox"> <p class="txt">말줄임 테스트 말줄임 테스트 말줄임 테스트 말줄임 테스트 말줄임 테스트</p></div></th>
<td><div class="txtBox"> <p class="txt">말줄임 테스트 말줄임 테스트 말줄임 테스트 말줄임 테스트 말줄임 테스트</p></div></td>
<th><div class="txtBox"> <p class="txt">말줄임 테스트 말줄임 테스트 말줄임 테스트 말줄임 테스트 말줄임 테스트</p></div></th>
<td><div class="txtBox"> <p class="txt">말줄임 테스트 말줄임 테스트 말줄임 테스트 말줄임 테스트 말줄임 테스트</p></div></td>
</tr>
<tr>
<th><div class="txtBox"> <p class="txt">말줄임 테스트 말줄임 테스트 말줄임 테스트 말줄임 테스트 말줄임 테스트</p></div></th>
<td><div class="txtBox"> <p class="txt">말줄임 테스트 말줄임 테스트 말줄임 테스트 말줄임 테스트 말줄임 테스트</p></div></td>
<th><div class="txtBox"> <p class="txt">말줄임 테스트 말줄임 테스트 말줄임 테스트 말줄임 테스트 말줄임 테스트</p></div></th>
<td><div class="txtBox"> <p class="txt">말줄임 테스트 말줄임 테스트 말줄임 테스트 말줄임 테스트 말줄임 테스트</p></div></td>
</tr>
</table>
.txtBox {
position: relative;
}
.txt {
overflow:hidden;
position:absolute;
left:0;
top:0;
width:100%;
white-space:nowrap;
text-overflow:ellipsis
}
필요한 부분은 총 세가지이다.
샘플코드: 링크