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>

Nach dem Login kopieren

Zusätzlich Überlegungen:

Beachten Sie, dass die Breite des Tabellenelements explizit angegeben werden sollte, um sicherzustellen, dass sie gleich oder kleiner als die Zellen mit fester Breite ist.

Das obige ist der detaillierte Inhalt vonWarum funktioniert „overflow:hidden' nicht in einer Tabellenzelle und wie kann ich das Problem beheben?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!