`overflow:hidden`이 요소에서 작동하지 않는 이유는 무엇이며 어떻게 해결할 수 있습니까?

Overflow: Hidden이

Overflow: Hidden에서 작동하지 않는 이유: Hidden은 요소 내에서 넘쳐나는 콘텐츠를 숨기는 데 자주 사용됩니다. 그러나 요소가 예상대로 작동하지 않아 텍스트가 잘리는 대신 셀이 확장될 수 있습니다.

이 문제를 해결하려면 두 가지 추가 CSS 속성이 필요합니다.

• table-layout:fixed - 이 속성은 테이블의 너비가 고정되고 개별 셀이 그 이상으로 커지지 않도록 보장합니다. it.
• white-space: nowrap - 이 속성은 텍스트가 여러 줄로 나누어지는 것을 방지하여 지정된 셀 너비 내에 유지되도록 합니다.

예:

다음 HTML 및 CSS를 고려하세요. 스니펫:

<table>
  <tbody>
    <tr>
      <td>
        This_is_a_terrible_example_of_thinking_outside_the_box.
      </td>
    </tr>
  </tbody>
</table>

* {
  box-sizing: border-box;
}

table {
  table-layout: fixed;
  border-collapse: collapse;
  width: 100%;
  max-width: 100px;
}

td {
  background: #F00;
  padding: 20px;
  overflow: hidden;
  white-space: nowrap;
  width: 100px;
  border: solid 1px #000;
}

이 예에서 테이블 요소의 최대 너비는 100px로 고정되어 있고 요소의 너비는 100px입니다. 이제 셀 내의 텍스트가 지정된 너비를 넘어서 숨겨집니다.

위 내용은 `overflow:hidden`이 요소에서 작동하지 않는 이유는 무엇이며 어떻게 해결할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!