Ausführliche Erklärung, wie CSS den automatischen Zeilenumbruch von englischen und fortlaufenden Zahlen implementiert

Für Elemente auf Blockebene wie p und p

Normale Textzeilenumbrüche (asiatischer Text und nicht-asiatischer Text) haben nach dem Standardwert „white-space:normal“. definierte Breite Automatischer Zeilenumbruch:

　html<p id="wrap">正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的white-space:normal,当定义</p>
　　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; Zeilenumbruch

　#wrap{word-break:break-all; width:200px;}

oder

#wrap{word-wrap:break-word; width:200px;}
　　<p id="wrap">abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111</p>

Wirkung: Zeilenumbrüche können erreicht werden

2. (Firefox-Browser) Zeilenumbrüche für fortlaufende englische Zeichen und arabische Ziffern, Alle Firefox-Versionen Dieses Problem wurde nicht gelöst. Wir können nur die Zeichen außerhalb der Grenze ausblenden oder Bildlaufleisten zum Container hinzufügen

#wrap{word-break:break-all; width:200px; overflow:auto;}
　　<p id="wrap">abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111</p>

Wirkung: Der Container ist normal und der Inhalt ist ausgeblendet

für Tabelle

　1. (IE-Browser) verwenden Sie table-layout:fixed, 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: Überschüssigen Inhalt ausblenden

2. (IE-Browser) verwenden Sie Tabellenlayout: Fest, um die Breite der Tabelle zu erzwingen, das innere td, th verwendet 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: Zeilenumbruch ist möglich

3. (IE-Browser) Beim Verschachteln von p, p, usw. Verwenden Sie in td, th die oben erwähnte p, p-Zeilenumbruchmethode

　4. (Firefox-Browser) verwenden Sie table-layout: behoben; um die Breite der Tabelle zu erzwingen, wird das innere td, th verwendet word-break: break-all; oder word-wrap: break-word; verwenden Sie overflow :hidden;Hide beyond content, hier funktioniert overflow:auto nicht

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

>

Effekt: Mehr als nur Inhalte ausblenden

5. (Firefox-Browsergerät) Verschachteln Sie p, p usw. in td, th und verwenden Sie die oben erwähnte Methode, um mit Firefox umzugehen, um das auszuführen Codefeld. Schließlich ist die Wahrscheinlichkeit, dass dies geschieht, sehr gering.

Das obige ist der detaillierte Inhalt vonAusführliche Erklärung, wie CSS den automatischen Zeilenumbruch von englischen und fortlaufenden Zahlen implementiert. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!