왜 `overflow:hidden`이 ``텍스트를 자르는 요소에서 작동하지 않습니까?

에서 오버플로 숨겨진 효과가 없습니까?

문제:
고정 너비를 갖도록 의도된 셀이 과도한 텍스트로 넘쳐 셀 경계를 확장합니다.

해결책:
셀 내에서 텍스트 잘림을 적용하려면 CSS 속성의 조합이 필요합니다.

1. 테이블 레이아웃: 고정

   • 테이블 너비가 정적으로 유지되도록 합니다.

2. overflow: hide on

   • 넘치는 모습을 숨긴다 text.

3. white-space: nowrap on

   • 텍스트가 줄 바꿈되는 것을 방지합니다. cell.

예(고정 너비 열):

<사전> 상자 크기: border-box;
}
테이블 {
테이블 레이아웃: 고정;
테두리 축소: 축소;
너비: 100%;
최대 너비: 100px;
}
td {
배경: #F00;
패딩: 20px;
오버플로: 숨겨진;
공백: nowrap;
너비: 100px;
테두리: 단색 1px #000;
}

 <tbody></p>
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><tr>
  <td>
    This_is_a_terrible_example_of_thinking_outside_the_box.
  </td>
</tr>
<tr>
  <td>
    This_is_a_terrible_example_of_thinking_outside_the_box.
  </td>
</tr>

로그인 후 복사

위 내용은 왜 `overflow:hidden`이 ``텍스트를 자르는 요소에서 작동하지 않습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!