suchen

Heim  >  Artikel  >  Web-Frontend  >  CSS-Zeilenumbruch erzwingen IE, Firefox-Zeilenumbruch

CSS-Zeilenumbruch erzwingen IE, Firefox-Zeilenumbruch

高洛峰
高洛峰Original
2016-11-24 11:24:021357Durchsuche

Für Elemente auf Blockebene wie div und p

Normale Textzeilenumbrüche (asiatischer Text und nicht-asiatischer Text) haben standardmäßig den Leerraum:normal und werden automatisch nach dem definierten umbrochen width:

html

Elemente mit normalem Textumbruch (asiatischer und nicht-asiatischer Text) haben den standardmäßigen Leerraum:normal, wenn < ;/div>

css

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

1. (IE-Browser) Englische Zeichen und verwenden Sie für arabische Ziffern den Zeilenumbruch: break-word; oder word-break:break-all, um einen erzwungenen Zeilenumbruch zu erreichen

-all; width:200px ;}

oder

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

abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111< / div>

Wirkung: Zeilenumbrüche können erreicht werden

2. (Firefox-Browser) Zeilenumbrüche fortlaufender englischer Zeichen und arabischer Ziffern, alle Versionen von Firefox lösen dieses Problem nicht. Das Problem besteht darin, dass wir nur die Zeichen ausblenden können, die die Grenze überschreiten, oder Bildlaufleisten zum Container hinzufügen können

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

abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111

Wirkung: Der Container ist normal und der Inhalt wird ausgeblendet

🎜>

Für Tabelle

1. (IE-Browser) verwenden Sie table-layout:fixed;, um die Breite der Tabelle zu erzwingen und überschüssigen Inhalt auszublenden

tr>

Wirkung: Überflüssige Inhalte ausblenden

2. (IE-Browsing-Gerät) Verwendung Tabellenlayout: behoben; um die Breite der Tabelle zu erzwingen, verwendet das innere td, th word-break: break-all; oder word-wrap: break-word; > - break : break-all; 🎜>
🎜>

3. (IE-Browser) Verschachtelung von div, p usw. in td, th usw. übernimmt die oben erwähnte Zeilenumbruchmethode von div und p

4 .(Firefox-Browser) Verwenden Sie table-layout:fixed, um die Breite der Tabelle zu erzwingen. Das innere td,th verwendet word-break: break-all oder word-wrap: break-; Wort; Zeilen umbrechen, overflow:hidden; hide beyond Content, overflow:auto funktioniert hier nicht

abcdefghigklmnopqrstuvwxyz1234567890

Wirkung: Mehr als den Inhalt ausblenden

5. (Firefox-Browser) Verwenden Sie die oben genannte Methode, um div, p usw. zu verschachteln. in td, th Hier erfahren Sie, wie Sie mit dem Feld „Code ausführen“ von Firefox umgehen. Schließlich ist die Wahrscheinlichkeit, dass dies geschieht, sehr gering.

Stellungnahme：
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
Vorheriger Artikel：CSS-Steuerung, kleines Symbol vor dem TextNächster Artikel：CSS-Steuerung, kleines Symbol vor dem Text

In Verbindung stehende Artikel

Mehr sehen