Warum funktioniert „overflow:hidden' nicht in einer Tabellenzelle und wie kann ich das Problem beheben?

Warum ein Überlauf in einer Tabellenzelle nicht funktioniert

Beim Versuch, die Breite einer Tabellenzelle einzuschränken, kommt es zum Überlauf : Die versteckte Eigenschaft verhindert oft nicht, dass die Tabelle mit Textzeichenfolgen ohne Leerzeichen erweitert wird. Dieses Problem kann durch die Implementierung einer Kombination von CSS-Eigenschaften für die Tabellen- und Tabellenzellenelemente gelöst werden.

Lösung:

Damit der Text am Rand von abgeschnitten wird Anstatt die Zelle zu erweitern, wenden Sie die folgenden Eigenschaften auf die Tabellenzelle an:

• Tabelle Element:

  • Tabellenlayout: fest

• Tabellenzellenelement:

  • Überlauf: versteckt
  • Leerzeichen: nowrap

Beispiel:

Unten finden Sie ein aktualisiertes Beispiel, das die korrekte Verwendung dieser Eigenschaften demonstriert:

 box-sizing: border-box;<br>}<br>table {<br> table-layout: behoben;<br> border-collapse: Collapse; <br>Breite: 200px;<br>}<br>td {<br>Hintergrund: #F00;<br> padding: 20px;<br> overflow: versteckt;<br> white-space: nowrap;<br> border: solid 1px #000;<br> width: 100%;<br>}< /pre><br><pre class="brush:php;toolbar:false"> <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>