표 셀에 줄임표가 표시되지 않는 이유는 무엇입니까?

테이블 셀에 줄임표가 표시되지 않음

주어진 HTML 테이블에서 일반적으로 셀 내의 텍스트가 정의된 범위를 초과할 때 줄임표가 표시되어야 합니다. 너비. 그러나 제공된 예제의 텍스트가 예상대로 잘리지 않습니다.

문제 조사

출력을 검사할 때 셀 너비가 139픽셀로 보고됩니다. 콘텐츠는 지정된 50px보다 넓어야 합니다. CSS 스타일을 살펴보면 다음 설정을 확인할 수 있습니다.

<code class="css">td {
  border: 1px solid black;
  width: 50px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}</code>

줄임표에 필요한 모든 속성이 있는 것 같습니다. 그렇다면 왜 작동하지 않나요?

해결책 1: 디스플레이: 차단

한 가지 해결 방법은 CSS에 다음 속성을 추가하는 것입니다.

<code class="css">td {
  display: block;
}</code>

이것은 테이블 셀의 표시 유형을 블록 수준으로 명시적으로 설정하여 테이블 셀이 독립 컨테이너처럼 작동하고 줄임표를 활성화합니다.

해결책 2: 테이블 레이아웃 및 너비

또 다른 접근 방식은 테이블 레이아웃을 설정하는 것입니다: 고정; 테이블의 너비 정의:

<code class="css">table {
  table-layout: fixed;
  width: 200px;
}</code>

이렇게 하면 테이블이 고정된 레이아웃을 갖게 되고 너비가 명시적으로 설정되어 콘텐츠 너비가 셀 너비 계산에 영향을 미칠 수 있는 문제를 방지할 수 있습니다.

위 내용은 표 셀에 줄임표가 표시되지 않는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!