Tipps zur Realisierung des automatischen Zeilenumbruchs mit CSS

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 id="wrap">ddd111111111111111111111111111111</div>

Wirkung: Zeilenumbrüche können erreicht werden

2. (Firefox-Browser) white-space:normal; word-break:break-all;overflow:hidden; Es gibt keine gute Implementierungsmethode unter demselben 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 id="wrap">ddd111111111111111111111111111111111111111</div>

Wirkung: Der Container ist normal und der Inhalt ist ausgeblendet

für Tisch

1. (IE-Browser) Verwenden Sie den Stil table-layout:fixed;

<Stil>
.tb{table-layout:fixed}
</style>
<table class="tbl" width="80">
<tr><td>
abcdefghigklmnopqrstuvwxyz 1234567890
</td></tr>
</table>

Wirkung: Kann Zeilen 2 umbrechen. (IE-Browser) Stil verwenden

<Stil>
.tb {table-layout:fixed}
</style>
<table class="tb" width="80"><tr><td nowrap>
abcdefghigklmnopqrstuvwxyz 1234567890
</td></tr>
</table>

Wirkung: Zeilenumbrüche können 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.

<Stil>
.tb{table-layout:fixed}
</style>
<table class="tb" width=80>
<tr>
<td width=25% nowrap>
abcdefghigklmnopqrstuvwxyz 1234567890
</td>
<td nowrap>abcdefghigklmnopqrstuvwxyz 1234567890</td>
</tr>
</table>

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

<Stil>
.tb {table-layout:fixed}
.td {overflow:hidden;}
</style>
<table class=tb width=80>
<tr><td width=25% class=td nowrap>
<div>abcdefghigklmnopqrstuvwxyz 1234567890</div>
</td>
<td class=td nowrap><div>abcdefghigklmnopqrstuvwxyz 1234567890</div></td>
</tr>
</table>

Die Zellenbreite muss hier als Prozentsatz definiert werden: Sie wird normal angezeigt, kann jedoch nicht umbrochen werden.

Hinweis: Es gibt keine gute Möglichkeit, Containerinhalte unter FF zu verpacken. Sie können den Überlauf nur verwenden, um den zusätzlichen Inhalt auszublenden, um eine Beeinträchtigung des Gesamteffekts zu vermeiden.