Warum funktioniert „overflow: versteckt' nicht bei einem „Element zum Abschneiden von Text'?

Überlauf versteckt, wirkungslos in ?

Problem:
A Zelle, die eine feste Breite haben soll, läuft mit überschüssigem Text über, wodurch die Zellgrenzen erweitert werden.

Lösung:
Um die Textkürzung innerhalb der Zelle zu erzwingen, ist eine Kombination von CSS-Eigenschaften erforderlich.

1. Tabellenlayout: behoben

   • Stellt sicher, dass die Tabellenbreite statisch bleibt.

2. Überlauf: versteckt auf

   • Häute quellen über Text.

3. white-space: nowrap on

   • Verhindert, dass Text innerhalb der Zelle umbrochen wird.

Beispiel (Behoben Breite Spalte):

 box-sizing: border-box;<br>} <br>Tabelle {<br>Tabellenlayout: fest;<br>Rahmen-Kollaps: Kollaps;<br>Breite: 100 %;<br>max-width: 100px;<br>}<br>td {<br>Hintergrund: #F00;<br>Auffüllung: 20px;<br>Überlauf: versteckt;<br>Leerraum: nowrap;<br> Breite: 100px;<br> Rand: durchgehend 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>

Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonWarum funktioniert „overflow: versteckt' nicht bei einem „Element zum Abschneiden von Text'?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!