테이블 셀에 줄임표가 표시되지 않음
주어진 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!