Problem mit dem automatischen Zeilenumbruch: Der Zeilenumbruch normaler Zeichen ist sinnvoller, aber fortlaufende Zahlen und englische Zeichen erweitern häufig den Container, was ziemliche Kopfschmerzen bereitet. Im Folgenden erfahren Sie, wie Sie den Zeilenumbruch in CSS implementieren. Bestes CSS zum Definieren von Zeilenumbrüchen .wrap { table-layout:fixed; word-break: overflow:hidden; 1. (IE-Browser) Verwenden Sie für fortlaufende englische Zeichen und arabische Ziffern den Zeilenumbruch: break-word; oder word-break:break-all; #wrap{word-break:break-all; width:200px;} <div id="wrap">abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111</div> Wirkung: Zeilenumbrüche können erreicht werden 2. (Firefox-Browser) Die Zeilenumbrüche fortlaufender englischer Zeichen und arabischer Ziffern lösen dieses Problem nicht. Wir können nur die Zeichen ausblenden, die die Grenze überschreiten, oder Bildlaufleisten zum Container hinzufügen. <div id="wrap">abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111</div> Wirkung: Der Container ist normal und der Inhalt ist ausgeblendet für Tisch <table style="table-layout:fixed" width="200"> Wirkung: Überflüssige Inhalte ausblenden 2. (IE-Browser) Verwenden Sie table-layout: Fixed;, um die Breite der Tabelle zu erzwingen, und verwenden Sie word-break: break-all; <table width="200" style="table-layout:fixed;"> Wirkung: Zeilenumbrüche können vorgenommen werden 3. (IE-Browser) Verwenden Sie beim Verschachteln von div, p usw. in td, th die oben erwähnte Zeilenumbruchmethode von div und p. 4. (Firefox-Browser) verwenden Sie table-layout: Fixed; um die Breite der Tabelle zu erzwingen, verwenden Sie word-break: break-all; versteckt; um über den Inhalt hinaus auszublenden, kann overflow:auto; hier nicht funktionieren Wirkung: Mehr als nur Inhalte verbergen 5. (Firefox-Browser) Verschachteln Sie div, p usw. in td, th usw. Verwenden Sie die oben erwähnte Methode, um mit Firefox umzugehen und die Codebox auszuführen. Schließlich ist die Wahrscheinlichkeit, dass dieses Phänomen auftritt, sehr gering, aber für Internetnutzer ist die Wahrscheinlichkeit sehr gering. Streiche sind nicht auszuschließen. Das Folgende ist die Wirkung des genannten Beispiels <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <h1><code>IE word-wrap : break-word ;</code></h1> <h1><code>Firefox/ word-break:break-all; overflow:auto;</code></h1>
Hier Überlauf: versteckt; oder automatisch;
=============================================== ===============
Bei Elementen auf Blockebene wie div und p hat der Zeilenumbruch von normalen Textelementen (asiatischer Text und nicht-asiatischer Text) den Standard-Leerraum: normal und wird automatisch nach der definierten Breite umbrochen.
html
<div id="wrap">Normale Textumbruchelemente (asiatischer und nicht-asiatischer Text) haben den Standard-Leerraum:normal, wenn definiert</div>
CSS
#wrap{white-space:normal; width:200px }
oder
#wrap{word-wrap:break-word; width:200px;}
#wrap{word-break:break-all; width:200px;}
1. (IE-Browser) Verwenden Sie table-layout:fixed;, um die Breite der Tabelle zu erzwingen und überschüssigen Inhalt auszublenden
<tr>
<td>abcdefghigklmnopqrstuvwxyz1234567890ssssssssssssss
</td>
</tr>
</table>
<tr>
<td width="25%" style="word-break : break-all; ">abcdefghigklmnopqrstuvwxyz 1234567890
</td>
<td style="word-wrap : break-word ;">abcdefghigklmnopqrstuvwxyz 1234567890
</td>
</tr>
</table>
<table style="table-layout:fixed" width="200">
<tr>
<td width="25%" style="word-break : break-all; overflow:hidden; ">abcdefghigklmnopqrstuvwxyz1234567890</td>
<td width="75%" style="word-wrap : break-word; overflow:hidden; ">abcdefghigklmnopqrstuvwxyz1234567890</td>
</tr>
</table>
<html xmlns="http://www.w3.org/1999/xhtml">
<Kopf>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Zeichenzeilenumbruch</title>
<style type="text/css">
table,td,th,div { border:1px green solid;}
Code {Schriftfamilie:"Courier New", Courier, Monospace;}
</style>
</head>
<Körper>
<h1><code>div</code></h1>
<h1><code>Alle Leerzeichen:normal;</code></h1>
<div style="white-space:normal; width:200px;">Wordwrap tritt weiterhin in einem td-Element auf, dessen WIDTH-Attribut auf einen Wert festgelegt ist, der kleiner als der nicht umgebrochene Inhalt der Zelle ist, selbst wenn die noWrap-Eigenschaft auf festgelegt ist true. Daher hat das WIDTH-Attribut in diesem Szenario Vorrang vor der noWrap-Eigenschaft.</div>
<div style="word-wrap : break-word ; width:200px;">abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111</div>
<h1><code>IE word-break:break-all;</code></h1>
<div style="word-break:break-all;width:200px;">abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111</div>
<div style="word-break:break-all; width:200px; overflow:auto;">abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111</div>
<h1><code>Tabelle</code></h1>
<h1><code>table-layout:fixed;</code></h1>
<table style="table-layout:fixed" width="200">
<tr>
<td>abcdefghigklmnopqrstuvwxyz1234567890ssssssssssssss</td>
</tr>
</table>
<h1><code>table-layout:fixed; word-break : break-all; word-wrap : break-word ;</code></h1>
<table width="200" style="table-layout:fixed;">
<tr>
<td width="25%" style="word-break : break-all; ">abcdefghigklmnopqrstuvwxyz1234567890ssssssssssssss</td>
<td style="word-wrap : break-word ;">abcdefghigklmnopqrstuvwxyz1234567890ssssssssssssss</td>
</tr>
</table>
<h1><code>FF table-layout:fixed; overflow:hidden;</code></h1>
<table style="table-layout:fixed" width="200">
<tr>
<td width="25%" style="word-break : break-all; overflow:hidden; ">abcdefghigklmnopqrstuvwxyz1234567890</td>
<td width="75%" style="word-wrap : break-word; overflow:hidden; ">abcdefghigklmnopqrstuvwxyz1234567890</td>
</tr>
</table>
</body>
</html>