table 셀의 CSS 텍스트가 길면 줄임표로 생략하는 방법

질문 : 표 셀의 CSS 텍스트 오버플로?

---

text-overflow 로를 사용하여 텍스트가 너무 길어서 한 줄에 맞지 않는 경우 여러 줄로 감싸는 대신 줄임표로 잘립니다. 이것이 가능한가?

나는 이것을 시도했다 :

td {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

그러나 white-space: nowrap 은 텍스트 (및 해당 셀)가 지속적으로 오른쪽으로 확장되어 테이블의 전체 너비가 컨테이너 너비를 넘어서게하는 것처럼 보입니다. 그러나 텍스트가 없으면 텍스트가 셀의 가장자리에 닿을 때 여러 줄로 계속 줄 바꿈됩니다.

답변

---

테이블 셀을 오버플로 할 때 줄임표가있는 텍스트를 자르려면 오버플로가 작동하도록 td max-width CSS 속성을 설정해야합니다. 추가 레이아웃 div 요소가 필요하지 않습니다.

td
{
 max-width: 100px;
 overflow: hidden;
 text-overflow: ellipsis;
 white-space: nowrap;
}

반응 형 레이아웃의 경우 열의 유효 최소 너비를 지정하려면 max-width max-width: 0; 무한한 유연성을 제공합니다. 또한 포함하는 테이블에는 특정 너비 (일반적으로 width: 100%; , 열의 너비는 일반적으로 전체 너비의 백분율로 설정됩니다.

table {width: 100%;}
td
{
 max-width: 0;
 overflow: hidden;
 text-overflow: ellipsis;
 white-space: nowrap;
}
td.column_a {width: 30%;}
td.column_b {width: 70%;}

기록 : IE 9 (또는 그 이하)의 경우 IE 관련 렌더링 문제를 해결하려면 HTML에이 기능이 있어야합니다.

<!--[if IE]>
<style>
table {table-layout: fixed; width: 100px;}
</style>
<![endif]-->

출처 : https://stackoverflow.com/questions/9789723/css-text-overflow-in-a-table-cell