Table의 td 에 텍스트 줄임 적용하기

div 와 같은 경우에는 텍스트 줄임에 관해 많은 예제들이 있는데 막상 td에 적용하려고 하면 잘 안됩니다.
아래는 그것에 대한 예제와 설명입니다.

td에 텍스트 줄임 적용하기

<table style="table-layout: fixed;">
  <tr>
    <td style="text-overflow:ellipsis; overflow:hidden; white-space:nowrap;">텍스트</td>
  </tr>

</table>

table-layout

먼저 테이블의 크기를 고정해야 합니다.

table-layout: fixed;

그리고 나머지 text-overflow, overflow, white-space 는 한쌍으로 사용해야 합니다.

text-overflow

텍스트에 오버 플로우 발생시 줄여지는 문자의 형태를 나타냅니다.

• string : 사용자가 지정한 문자열로 뒤 잘리는 문장을 표현

style=text-overflow:"~"

• clip

clip은 뒤에 문장을 잘라버림으로써 보이지 않게 해줌

style=text-overflow:clip

• ellipsis

string 에서는 다양한 문자를 넣을 수 있는데 ellipsis를 사용하면 '...' 로 표시

style=text-overflow:ellipsis

overflow:hidden

특정범위를 초과할 경우(overflow) 초과되는 컨텐츠는 숨김

overflow:hidden;

white-space:nowrap

줄바꿈을 강제로 하지 않도록 해주는 CSS입니다.