<body style="direction: ltr;" leftmargin="2" topmargin="0" oncontextmenu="return false" ondragstart="return false" onselectstart="return false" onselect="document.selection.empty()" oncopy ="document.selection.empty()" onbeforecopy="return false" onmouseup="document.selection.empty()" marginheight="0" marginwidth="0">Rechtsklick-Kopierprogramm eliminieren In diesem Artikel wird erläutert, wie Sie mithilfe von CSS automatisch englischen Text umbrechen können. Kontinuierliches Englisch oder Zahlen können dazu führen, dass der Container erweitert wird, und können nicht automatisch entsprechend der Größe des Containers umbrochen werden. 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. So kann CSS sie automatisch umbrechen! Für Div und Table sowie verschiedene Browser unterscheiden sich die Methoden zum Implementieren des automatischen Zeilenumbruchs in CSS geringfügig. Sie werden im Folgenden vorgestellt: für div 1. (IE-Browser) white-space:normal; word-break:break-all folgt hier dem Standard: div css xhtml xml Beispiel-Quellcode Beispiel-Quellcode [www.52css.com] oder: #wrap{word-break:break-all;width:200px;} Wirkung: Es kann ein automatischer Zeilenumbruch 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! div css xhtml xml Beispiel-Quellcode Beispiel-Quellcode [www.52css.com] oder: #wrap{word-break:break-all;width:200px; Wirkung: Der Container ist normal und der Inhalt ist ausgeblendet 1. (IE-Browser) Verwenden Sie den Stil table-layout:fixed: div css xhtml xml Beispiel-Quellcode Beispiel-Quellcode [www.52css.com] Effekt: Zeilen automatisch umbrechen 2. Nutzungsstil (IE-Browser): div css xhtml xml Beispiel-Quellcode Beispiel-Quellcode [www.52css.com] Effekt: Zeilen automatisch umbrechen 3. (IE-Browser) Verwenden Sie den Stil table-layout:fixed und nowrap, wenn Sie einen Prozentsatz verwenden, um die td-Größe festzulegen: div css xhtml xml Beispiel-Quellcode Beispiel-Quellcode [www.52css.com] Wirkung: Beide TDs wickeln normal und automatisch um 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“: div css xhtml xml Beispiel-Quellcode Beispiel-Quellcode [www.52css.com] Die Zellenbreite muss hier als Prozentsatz definiert werden: Sie wird normal angezeigt, kann jedoch nicht umbrochen werden.
#wrap{white-space:normal; width:200px }
<div id="wrap">ddd111111111111111111111111111111</div>
#wrap{white-space:normal; width:200px; overflow:auto;}
<div id="wrap">ddd111111111111111111111111111111111111111</div>
http://font.knowsky.com/
für Tisch
<Stil>
.tb{table-layout:fixed}
</style>
<table class="tbl" width="80">
<tr><td>
abcdefghigklmnopqrstuvwxyz 1234567890
</td></tr>
</table>
<Stil>
.tb {table-layout:fixed}
</style>
<table class="tb" width="80"><tr><td nowrap>
abcdefghigklmnopqrstuvwxyz 1234567890
</td></tr>
</table>
<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>
<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>