Heim >Web-Frontend >HTML-Tutorial >Implementierung von erzwungenen Zeilenumbrüchen und Nicht-Zeilenumbrüchen in div, td, p und anderen Containern bei der Produktion von html_HTML/Xhtml_Webseiten

Implementierung von erzwungenen Zeilenumbrüchen und Nicht-Zeilenumbrüchen in div, td, p und anderen Containern bei der Produktion von html_HTML/Xhtml_Webseiten

WBOY
WBOYOriginal
2016-05-16 16:39:111563Durchsuche

1. Erzwingen Sie keine Zeilenumbrüche und schließen Sie mit Auslassungspunkten ab.

Code kopieren
Der Code lautet wie folgt:


Hallo Freunde, Freunde, Freunde, warum kann ich den Effekt nicht sehen?


2. Automatischer CSS-Zeilenumbruch

Code kopieren
Der Code lautet wie folgt:

div{ word-wrap: break-word; word-break: normal }

3 🎜>

Code kopieren
Der Code lautet wie folgt:
div{word-break:break-all;}

Wenn die Divs verschachtelt sind, wird das innere Div automatisch entsprechend dem Inhalt umbrochen. Sie können nur die äußere Div-Breite und White-Spance: Nowrap festlegen.
word-break:break-all und word-wrap:break-word ermöglichen beide, dass der Inhalt von Containern wie DIV automatisch umgebrochen wird

Der Unterschied ist:

1 , word-break:break-all Wenn ein Div beispielsweise 200 Pixel breit ist, wird sein Inhalt automatisch bei 200 Pixel umbrochen. Wenn am Ende der Zeile ein langes englisches Wort steht (Glückwunsch usw.), wird es abgeschnitten Wort und wandeln Sie es in die Zeile „The end is conra“ (der vordere Teil der Glückwünsche) um, und die nächste Zeile ist der hintere Teil der tulation (conguatulation).

2. Das Beispiel „Zeilenumbruch:Wortumbruch“ ist das gleiche wie oben, der Unterschied besteht jedoch darin, dass das gesamte Wort als Ganzes angezeigt wird Das gesamte Wort wird automatisch in die nächste Zeile eingefügt, ohne das Wort abzuschneiden.

3, word-break;break-all Unterstützte Version: IE5 oder höher Dieses Verhalten ist das gleiche wie in asiatischen Sprachen üblich. Pausen innerhalb eines beliebigen Wortes einer Textzeile in einer nicht-asiatischen Sprache sind ebenfalls zulässig. Dieser Wert eignet sich für asiatischen Text, der nicht-asiatischen Text enthält.

WORD-WRAP:break-word Unterstützte Version: IE5.5 oder höher Der Inhalt wird innerhalb der Grenze umgebrochen.

Bei Bedarf erfolgt auch ein Wortumbruch. Der Tisch wird automatisch umwickelt, um eine Dehnung zu vermeiden.

Wortumbruch: normal |. break-all |. Parameter:

normal: Gemäß den Textregeln asiatischer und nichtasiatischer Sprachen, zulässig innerhalb Wörter Zeilenumbruch

Break-all: Dieses Verhalten ist das gleiche wie bei asiatischen Sprachen üblich. Pausen innerhalb eines beliebigen Wortes einer Textzeile in einer nicht-asiatischen Sprache sind ebenfalls zulässig. Dieser Wert eignet sich für asiatischen Text, der nicht-asiatischen Text enthält.

keep-all: Gleich wie normal für alle nicht-asiatischen Sprachen. Für Chinesisch, Koreanisch und Japanisch sind Wortumbrüche nicht zulässig. Syntax geeignet für nicht-asiatischen Text, der eine kleine Menge asiatischen Text enthält:

Zeilenumbruch: normal | Wortumbruch

Parameter:

normal: Inhalt zulassen Durchbrechen Sie die angegebenen Containergrenzen

break-word: Der Inhalt wird innerhalb der Grenzen unterbrochen. Bei Bedarf erfolgt auch ein Wortumbruch. Beschreibung: Legt fest oder ruft ab, ob die Zeile umgebrochen werden soll, wenn die aktuelle Zeile die Grenze des angegebenen Containers überschreitet. Die entsprechende Skriptfunktion von

ist wordWrap. Bitte sehen Sie sich andere Bücher an, die ich geschrieben habe. Syntax: Tabellenlayout: auto |. Fixed Parameter: auto: Standardmäßiger automatischer Algorithmus. Das Layout basiert auf dem Inhalt jeder Zelle. Die Tabelle wird erst angezeigt, wenn jede Zelle gelesen und berechnet wurde. Sehr langsam behoben: Layout-Algorithmus korrigiert. Bei diesem Algorithmus basiert das horizontale Layout nur auf der Breite der Tabelle, der Breite des Tabellenrandes, dem Zellenabstand und der Breite der Spalten und hat nichts mit dem Inhalt der Tabelle zu tun. Beschreibung: Festlegen oder rufen Sie den Layout-Algorithmus der Tabelle ab. Das entsprechende Skriptattribut ist tableLayout.

Vorschlag: Die 3C-Erkennung von Wortumbrüchen führt zu Problemen, die auch in Baidu-Snapshots zu Problemen führen – dieses Attribut des OPERA FIREFOX-Browsers unterstützt das Wortumbruch-Attribut nicht und kann durch Leerzeichen:normal ersetzt werden ; , damit die Zeilenumbrüche unter FireFox und IE korrekt sind, und es ist zu beachten, dass die Leerzeichen zwischen Wörtern nicht zum Ersetzen verwendet werden können, da sonst die Zeilenumbrüche nicht korrekt sind.
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