Why Doesn't `overflow: hidden` Work on a `` Element to Truncate Text?

Overflow Hidden Ineffective in ?

Problem:
A cell intended to have a fixed width overflows with excess text, expanding the cell boundaries.

Solution:
To enforce text truncation within the cell, a combination of CSS properties is required.

1. table-layout: fixed

   • Ensures the table width remains static.

2. overflow: hidden on

   • Hides overflowing text.

3. white-space: nowrap on

   • Prevents text from wrapping within the cell.

Example (Fixed Width Column):

  box-sizing: border-box;<br>}<br>table {<br>  table-layout: fixed;<br>  border-collapse: collapse;<br>  width: 100%;<br>  max-width: 100px;<br>}<br>td {<br>  background: #F00;<br>  padding: 20px;<br>  overflow: hidden;<br>  white-space: nowrap;<br>  width: 100px;<br>  border: solid 1px #000;<br>}

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

Copy after login

The above is the detailed content of Why Doesn't `overflow: hidden` Work on a `` Element to Truncate Text?. For more information, please follow other related articles on the PHP Chinese website!