Heim > Web-Frontend > CSS-Tutorial > Hauptteil

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

不言
Freigeben: 2018-06-21 15:55:54
Original
2109 Leute haben es durchsucht

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 >
Nach dem Login kopieren
css
#wrap{white-space:normal; width:200px; }
Nach dem Login kopieren
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;}
Nach dem Login kopieren
oder
#wrap{word-wrap:break-word; width:200px;}
Nach dem Login kopieren

< id="wrap">abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111< /p >
Nach dem Login kopieren
Nach dem Login kopieren
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;}
Nach dem Login kopieren

< id="wrap">abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111< /p >
Nach dem Login kopieren
Nach dem Login kopieren
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 >
Nach dem Login kopieren
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 >
Nach dem Login kopieren

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!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage