Heim > Artikel > Web-Frontend > Automatischer Zeilenumbruch für CSS-Steuertext

Automatischer Zeilenumbruch für CSS-Steuertext

高洛峰Original: 2016-10-12 10:33:421392Durchsuche

Das Problem des automatischen Zeilenumbruchs bei normalen Zeichen ist sinnvoller, aber fortlaufende Zahlen und englische Zeichen erweitern häufig den Container, was ziemlich problematisch ist. So implementiert CSS den Zeilenumbruch der

Methode

Für Elemente auf Blockebene wie div und p,
normale Textumbruchelemente (asiatischer Text und nicht-asiatischer Text) haben den Standard-Leerraum: normal, und sie werden nach der definierten Breite automatisch umbrochen

html

Normale Textumbruchelemente (asiatischer und nicht-asiatischer Text) haben den Standard-Leerraum:normal, wenn definiert

css
#wrap{white- Leerzeichen: normal; Breite: 200 Pixel; 1 (IE-Browser) Verwenden Sie für fortlaufende englische Zeichen und arabische Ziffern den Zeilenumbruch: Zeilenumbruch

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

oder

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

abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111

Effekt: Zeilenumbrüche können erreicht werden

2. (Firefox-Browser) Zeilenumbrüche von fortlaufenden englischen Zeichen und arabischen Ziffern, alle Firefox-Versionen haben dieses Problem nicht gelöst,

Wir blenden nur die Zeichen aus, die die Grenze überschreiten, oder fügen dem Container Bildlaufleisten hinzu

#wrap

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

abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111

Effekt: Der Container ist normal und der Inhalt ist ausgeblendet

Für Tabelle

1 (IE-Browser) verwenden Sie table-layout:fixed ; um die Breite der Tabelle zu erzwingen, redundanter Inhalt ausgeblendet

tr>

abcdefghigklmnopqrstuvwxyz1234567890sssssssssssss

abcdefghigklmnopqrstuvwxyz1234567890ssssssssssssss

Effekt: Überflüssige Inhalte ausblenden

2 (IE-Browser) Tabellenlayout verwenden: behoben; um die Breite der Tabelle zu erzwingen,
Innere Ebene td, th verwendet Word-Break: Break-All; oder Word-Wrap: Break-Word Line Break

abcdefghigklmnopqrstuvwxyz 1234567890

Effekt: Zeilenumbruch ist möglich

3. (IE-Browser) Verschachtelung von divs, p usw. in td, th verwendet die Zeile oben erwähnte Umbruchmethode von div und p

4. (Firefox-Browser) Verwenden Sie table-layout: Fixed, um die Breite der Tabelle zu erzwingen, das innere td, th übernehmen
, verwenden Sie Wortumbruch: break-all; oder word-wrap: break-word; line break,
Verwenden Sie overflow:hidden;, um überschüssigen Inhalt auszublenden, funktioniert overflow:auto nicht

abcdefghigklmnopqrstuvwxyz1234567890

abcdefghigklmnopqrstuvwxyz1234567890 abcdefghigklmnopqrstuvwxyz1234567890

Effekt: Mehr als nur Inhalte ausblenden

5. (Firefox-Browser) Verschachteln Sie div, p usw. in td, th usw. Verwenden Sie die oben genannte Methode, um mit Firefox umzugehen

Ausführen das Codefeld 100 Materialnetzwerk

Schließlich ist die Wahrscheinlichkeit, dass dieses Phänomen auftritt, sehr gering, aber es kann die Streiche der Internetnutzer nicht ausschließen. Wenn

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>字符换行
 
</title>
<style type="text/css">
table,td,th,div { border:1px green solid;}
code { font-family:"Courier New", Courier, monospace;}
 
</style>
</head>
<body>
<h1><code>div</code></h1>
<h1><code>All white-space:normal;</code></h1>
<div style="white-space:normal; width:200px;">Wordwrap still occurs in a td element that 
has its WIDTH attribute set to a value smaller than the unwrapped content of the cell, 
even if the noWrap property is set to true. Therefore, the WIDTH attribute takes 
precedence over the noWrap property in this scenario</div>
 
<h1><code>IE  word-wrap : break-word ;</code></h1>
<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>
 
<h1><code>Firefox/ word-break:break-all; overflow:auto;</code></h1>
<div style="word-break:break-all; width:200px; overflow:auto;">abcdefghijklmnabcdefghijklmnabcdefghijkl
mn111111111</div>
<h1><code>table</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>

Sie Fragen haben, hinterlassen Sie bitte unten eine Nachricht

Das Folgende ist die Wirkung des genannten Beispiels

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Die leistungsstärksten über 40 reinen CSS-Grafiken aller ZeitenNächster Artikel：Die leistungsstärksten über 40 reinen CSS-Grafiken aller Zeiten

In Verbindung stehende Artikel

Mehr sehen