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) folgt das erstere dem Standard.
#wrap{white-space:normal; width:200px }
oder
#wrap{word-break:break-all;width:200px;}
<div id="wrap">ddd111111111111111111111111111</div>
Wirkung: Zeilenumbruch kann erreicht werden
2. (Firefox-Browser) white-space:normal; word-break:break-all;overflow:hidden; Das gleiche FF hat nicht Eine gute Implementierungsmethode besteht darin, Bildlaufleisten auszublenden oder hinzuzufügen. Natürlich ist es besser, keine Bildlaufleisten hinzuzufügen!
#wrap{white-space:normal; width:200px; overflow:auto;}
oder
#wrap{word-break:break-all;width:200px;
<div id="wrap">ddd11111111111111111111111111111111111</div>
Wirkung
:
Für Tabelle
1. (IE-Browser) verwenden Sie den Stil table-layout:fixed;
.tb{table-layout:fixed}
</style>
<table class="tbl" width="80">
<tr><td>
abcdefghigklmnopqrstuvwxyz 1234567890
</td></tr>
</table>
Wirkung: Kann Zeilen umbrechen
http://www.knowsky.com/
2. (IE-Browser) verwenden Sie den Stil
<style>
.tb {table-layout:fixed}
</style>
<table class="tb" width="80"><tr><td nowrap>
abcdefghigklmnopqrstuvwxyz 1234567890
</td></tr>
</table>
Wirkung: kann 3 umbrechen
. (IE-Browser) Verwenden Sie den Stil table-layout:fixed und nowrap<style>
, wenn Sie Prozent verwenden, um die td-Größe festzulegen
.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 umbrochen
4. (Firefox-Browser) Verwenden Sie die Stile table-layout: Fixed und nowrap, wenn Sie einen Prozentsatz verwenden, um die td-Größe festzulegen, und verwenden Sie div
<style>
.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 in Prozent angegeben werden. Der Effekt ist: normale Anzeige, aber kein Zeilenumbruch.
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.