Why Doesn't `overflow: hidden` Work on a Element, and How Can I Fix It?

Why Overflow: Hidden Doesn't Work in a

Overflow: hidden is often used to hide overflowing content within an element. However, when applied to a element, it may fail to work as expected, leading to the expansion of the cell instead of the truncation of text.

To resolve this issue, two additional CSS properties are required:

• table-layout: fixed - This property ensures that the table has a fixed width and individual cells do not grow beyond it.
• white-space: nowrap - This property prevents the text from breaking across multiple lines, ensuring that it remains within the specified cell width.

Example:

Consider the following HTML and CSS snippets:

<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;
}

In this example, the table element has a fixed maximum width of 100px, and the element has a width of 100px. The text within the cell will now be hidden beyond the specified width.

The above is the detailed content of Why Doesn't `overflow: hidden` Work on a Element, and How Can I Fix It?. For more information, please follow other related articles on the PHP Chinese website!