CSS implementiert den automatischen Zeilenumbruch

Jeder weiß, dass kontinuierliches Englisch oder Zahlen dazu führen können, dass sich der Container erweitert, und dass er nicht automatisch entsprechend der Größe des Containers umbrochen werden kann. Hier erfahren Sie, wie Sie sie mit CSS umschließen!

für div

1. (IE-Browser) White-Space: Normal; Ersteres folgt hier dem Standard.

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

oder

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

<div >ddd1111111111111111111111111111111111</div>

Wirkung: Zeilenumbrüche können erreicht werden

2. (Firefox-Browser) white-space:normal; word-break:break-all;overflow:hidden; Es gibt auch keine gute Implementierungsmethode in FF. Sie können nur Bildlaufleisten ausblenden oder hinzufügen. Der Effekt ist besser!

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

oder

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

<div >ddd1111111111111111111111111111111111111111</div>

Wirkung: Der Container ist normal und der Inhalt ist ausgeblendet

für Tisch

1. (IE-Browser) verwenden Sie den Stil table-layout: Fixed;

Wirkung: Es können Zeilenumbrüche vorgenommen werden

2. (IE-Browser) Verwenden Sie den Stil table-layout: Fixed und Nowrap

Wirkung: Es können Zeilenumbrüche vorgenommen werden

3. (IE-Browser) Verwenden Sie den Stil table-layout: Fixed und Nowrap, wenn Sie einen Prozentsatz verwenden, um die td-Größe festzulegen.

Wirkung: Beide TDs werden normal umgebrochen

4. (Firefox-Browser) Verwenden Sie den Stil „table-layout: Fixed“ und „nowrap“, wenn Sie „Prozentsatz“ verwenden, um die td-Größe festzulegen, und verwenden Sie „div“.

Die Zellenbreite muss hier in Prozent angegeben werden

Wirkung: Normale Anzeige, aber kein Zeilenumbruch (Hinweis: Es gibt keine gute Möglichkeit, den Containerinhalt unter FF zu umbrechen. Sie können den Überlauf nur verwenden, um den zusätzlichen Inhalt auszublenden, um den Gesamteffekt nicht zu beeinträchtigen.)