내 테이블 셀()에서 `overflow:hidden`이 작동하지 않는 이유는 무엇입니까?

오버플로가 에서 작동하지 않음: CSS 수정

Overflow:hidden이

문제의 핵심은 테이블 요소의 기본 동작에 있습니다. 테이블은 일반적으로 콘텐츠에 따라 셀 너비가 확장되고 축소되는 유동 레이아웃을 사용합니다. 이를 재정의하려면 고정 테이블 레이아웃을 지정해야 합니다.

table {
  table-layout: fixed;
}

또한 테이블 컨테이너에 고정 너비를 설정하면 테이블 셀에 사용할 수 있는 전체 크기가 제한됩니다.

table {
  ...
  width: 200px;  

마지막으로, 셀의 내용을 실제로 제한하기 위해 테이블 ​​셀에 Overflow:hidden을 적용하고 단어 방지를 위해 white-space: nowrap을 적용합니다. Wrap:

td {
  ...
  overflow: hidden;
  white-space: nowrap;
}

이러한 결합된 조정을 통해 텍스트 내용이 셀 가장자리에서 잘려 넘치는 것을 방지할 수 있습니다.

예

다음 수정된 예를 고려해보세요.

<table>

이제, 텍스트는 원하는 대로 100px 셀 너비에서 잘립니다.

위 내용은 내 테이블 셀()에서 `overflow:hidden`이 작동하지 않는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!