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

   
   
   

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!