CSS realisiert einen automatischen Zeilenumbruch, um zu verhindern, dass das Div unterbrochen wird und das Layout beeinträchtigt.

Das Problem des automatischen Zeilenumbruchs bei normalen Zeichen ist vernünftiger, aber fortlaufende Zahlen und englische Zeichen dehnen den Container oft aus, was ziemlich problematisch ist. So implementiert CSS den Zeilenumbruch.

Für p , p und andere Elemente auf Blockebene
Normaler Textumbruch (asiatischer Text und nicht-asiatischer Text) Elemente haben den Standard-Leerraum: normal und werden automatisch nach der definierten Breite umbrochen
html

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

css

#wrap{white-space:normal; width:200px; }

1 (IE-Browser) Für fortlaufende englische Zeichen und arabische Ziffern, verwenden Sie Zeilenumbruch: break-word; oder word-break:break-all, um einen erzwungenen Zeilenumbruch

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

oder

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

< id="wrap">abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111< /p >

zu erzielen: kann erreicht werden

2. (Firefox-Browser) Alle Versionen von Firefox lösen dieses Problem nicht. Wir können nur die Zeichen ausblenden, die die Grenze überschreiten der Container

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

< id="wrap">abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111< /p >

Effekt: Der Container ist normal und der Inhalt ist ausgeblendet

Für Tabelle

1 (IE-Browser) verwenden Sie table-. layout:fixed; um die Tabellenbreite zu erzwingen, überschüssigen Inhalt ausblenden

< style="table-layout:fixed" width="200">
<>
<>abcdefghigklmnopqrstuvwxyz1234567890ssssssssssssss
< /td >
< /tr >
< /table >

effect: überschüssigen Inhalt ausblenden

2. (IE-Browser) verwenden Sie table-layout: Fixed, um die Breite der zu erzwingen Tabelle, das innere td, th verwendet Word-Break: Break-All; oder Word-Wrap: Break-Wort; Zeilenumbruch ) Verschachteln Sie p,p in td,th usw. Verwenden Sie die oben erwähnte Zeilenumbruchmethode von p und p

4. (Firefox-Browser) Verwenden Sie table-layout: Fixed, um die Breite der Tabelle zu erzwingen Die innere Ebene verwendet übrigens word-break: break-all ;oder word-wrap : break-word ;wrap, verwenden Sie overflow:hidden;, um den überschüssigen Inhalt auszublenden, hier funktioniert overflow:auto nicht

< width="200" style="table-layout:fixed;">
<>
< width="25%" style="word-break : break-all; ">abcdefghigklmnopqrstuvwxyz 1234567890
< /td >
< style="word-wrap : break-word ;">abcdefghigklmnopqrstuvwxyz 1234567890
< /td >
< /tr >
< /table >

Effekt: Mehr als den Inhalt ausblenden

5. (Firefox-Browser) Verschachteln Sie p, p usw. in td, th und verwenden Sie die oben genannte Methode, um mit Firefox umzugehen

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für das Studium aller hilfreich ist. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website.

Verwandte Empfehlungen:

So verwenden Sie CSS, um eine Maskenebene zu erreichen, wenn die Maus darüber schwebt

Informationen zum Erreichen mehrere Zeilen und mehrere Zeilen mit der CSS-Spaltenlayoutmethode

So verwenden Sie CSS, um Auslassungspunkte im langen Teil des Titeltextes anzuzeigen

Das obige ist der detaillierte Inhalt vonCSS realisiert einen automatischen Zeilenumbruch, um zu verhindern, dass das Div unterbrochen wird und das Layout beeinträchtigt.. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!