표 셀에서 줄임표를 사용하여 CSS 텍스트 오버플로를 구현하는 방법은 무엇입니까?

표 셀의 CSS 텍스트 오버플로

목표는 표 셀에 CSS 텍스트 오버플로를 구현하여 텍스트가 셀의 너비는 줄임표로 잘려 여러 줄로 묶이는 것을 방지합니다. 행.

시도:

다음 CSS를 사용하여 초기 시도가 이루어졌습니다.

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

그러나 공백: nowrap 속성 텍스트와 해당 셀이 테이블을 초과하여 오른쪽으로 무한정 확장되었습니다. 컨테이너.

해결책:

원하는 효과를 얻으려면 각 테이블 셀에 대해 max-width CSS 속성을 설정해야 합니다. 예는 다음과 같습니다.

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 고려 사항:

IE 9 이하의 경우 다음 HTML 렌더링 문제를 해결하려면 해킹이 필요합니다:

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

위 내용은 표 셀에서 줄임표를 사용하여 CSS 텍스트 오버플로를 구현하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!