Problem mit dem automatischen Zeilenumbruch: Der Zeilenumbruch normaler Zeichen ist sinnvoller, aber fortlaufende Zahlen und englische Zeichen erweitern häufig den Container, was ziemliche Kopfschmerzen bereitet. Im Folgenden erfahren Sie, wie Sie den Zeilenumbruch in CSS implementieren.
Für Elemente auf Blockebene wie div und p haben normale Textumbruchelemente (asiatischer und nicht-asiatischer Text) den Standardwert „white-space:normal“ und werden automatisch nach der definierten Breite umbrochen.
html
<div id="wrap">Normale Textumbruchelemente (asiatischer und nicht-asiatischer Text) haben den Standard-Leerraum:normal, wenn definiert</div>
CSS
#wrap{white-space:normal; width:200px }
1. (IE-Browser) Verwenden Sie für fortlaufende englische Zeichen und arabische Ziffern den Zeilenumbruch: break-word; oder word-break:break-all;
#wrap{word-break:break-all; width:200px;}
oder
#wrap{word-wrap:break-word; width:200px;}
<div id="wrap">abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111</div>
Wirkung: Zeilenumbrüche können erreicht werden
2. (Firefox-Browser) Die Zeilenumbrüche fortlaufender englischer Zeichen und arabischer Ziffern lösen dieses Problem nicht. Wir können nur die Zeichen ausblenden, die die Grenze überschreiten, oder Bildlaufleisten zum Container hinzufügen.
#wrap{word-break:break-all; width:200px;}
<div id="wrap">abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111</div>
Wirkung: Der Container ist normal und der Inhalt wird für die Tabelle ausgeblendet
(1) (IE-Browser) Verwenden Sie table-layout: behoben; um die Breite der Tabelle zu erzwingen und überschüssigen Inhalt auszublenden
<table style="table-layout:fixed" width="200">
<tr>
<td>abcdefghigklmnopqrstuvwxyz1234567890ssssssssssssss
</td>
</tr>
</table>
Wirkung: Überflüssige Inhalte ausblenden
(2) (IE-Browser) verwenden Sie table-layout: Fixed; um die Breite der Tabelle zu erzwingen, verwenden Sie word-break: break-all; oder word-wrap: break-word line break;
<table width="200" style="table-layout:fixed;">
<tr>
<td width="25%" style="word-break : break-all; ">abcdefghigklmnopqrstuvwxyz 1234567890
</td>
<td style="word-wrap : break-word ;">abcdefghigklmnopqrstuvwxyz 1234567890
</td>
</tr>
</table>
Wirkung: Zeilenumbrüche können vorgenommen werden
3. (IE-Browser) Verwenden Sie beim Verschachteln von div, p usw. in td, th die oben erwähnte Zeilenumbruchmethode von div und p.
4. (Firefox-Browser) Verwenden Sie table-layout: Fixed; um die Breite der Tabelle zu erzwingen, verwenden Sie Word-Break: Break-All; oder Word-Wrap: Break-Word Line Break. versteckt; um über den Inhalt hinaus auszublenden, kann overflow:auto; hier nicht funktionieren
<table style="table-layout:fixed" width="200">
<tr>
<td width="25%" style="word-break : break-all; overflow:hidden; ">abcdefghigklmnopqrstuvwxyz1234567890</td>
<td width="75%" style="word-wrap : break-word; overflow:hidden; ">abcdefghigklmnopqrstuvwxyz1234567890</td>
</tr>
</table>
Wirkung: Mehr als nur Inhalte verbergen
5. (Firefox-Browser) Verschachteln Sie div, p usw. in td, th usw. Verwenden Sie die oben erwähnte Methode, um mit Firefox umzugehen