Home >Web Front-end >CSS Tutorial >Why Doesn't `overflow: hidden` Work on a Element, and How Can I Fix It?

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

Patricia Arquette
Patricia ArquetteOriginal
2024-12-07 03:02:11530browse

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!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn