> 웹 프론트엔드 > CSS 튜토리얼 > 표 셀에 줄임표가 표시되지 않는 이유는 무엇입니까?

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

Susan Sarandon
풀어 주다: 2024-11-04 22:59:02
원래의
851명이 탐색했습니다.

Why Isn't Ellipsis Appearing in My Table Cells?

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

주어진 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿