Heim > Web-Frontend > CSS-Tutorial > Eine Einführung in die Unterschiede zwischen Wortumbruch und Umbruch

Eine Einführung in die Unterschiede zwischen Wortumbruch und Umbruch

高洛峰
Freigeben: 2017-03-04 10:29:22
Original
1656 Leute haben es durchsucht

Wortumbruch: [Wortumbruch]

Definition: Gibt die Verarbeitungsmethode des automatischen Zeilenumbruchs an. Hinweis: Durch die Verwendung von Wortumbruch können Sie den Browser anpassen Ändern Sie die Zeile jederzeit. Positionsumbruch.

Grammatik: Wortumbruch: normal|break-all|keep-all;

默认值 normal
继承性 yes
版本 css3
Javascript语法 object.style.wordBreak="keep-all"

描述
normal 使用浏览器默认的换行规则。
break-all 允许在单词内换行。
keep-all 只能在半角空格或连字符处换行。


Kompatibilität:

word-break work-wrap的区别示例介绍

Zum Beispiel:

<span class="text-s">iIanishttp://www.php.cn/;/span>    
.text-s {    
    display: inline-block;    
    width: 240px;    
    // word-break: keep-all;    
}
Nach dem Login kopieren

Wortumbruch ist nicht gesetzt:

word-break work-wrap的区别示例介绍

Wortumbruch ist gesetzt: break-all;

word-break work-wrap的区别示例介绍

Setze Wortumbruch:keep-all; oder Wortumbruch:normal;

word-break work-wrap的区别示例介绍

word-wrap:【Zeilenumbruch】

Definition: Erlaubt, dass lange Wörter oder URL-Adressen in die nächste Zeile umgebrochen werden.

Syntax: Zeilenumbruch: normal|break-word;

Standardwert: normal
Vererbung: ja
Version: CSS3
JavaScript-Syntax:
默认值: normal
继承性: yes
版本: CSS3
JavaScript 语法:

object.style.wordWrap="break-word"

Objektstil .wordWrap="break-word"


描述
normal 只在允许的断字点换行(浏览器保持默认处理)。
break-word 在长单词或 URL 地址内部进行换行。

Kompatibilität:

word-break work-wrap的区别示例介绍

Zum Beispiel: [Gleiche wie oben]

Zeilenumbruch ist nicht eingestellt:

word-break work-wrap的区别示例介绍

Zeilenumbruch ist eingestellt: normal;

word-break work-wrap的区别示例介绍

Wortumbruch festlegen:break-word;

word-break work-wrap的区别示例介绍

Vergleichen Sie die obige Kastanienbraun-Einstellung Wort Der Unterschied zwischen -break:break-all; und word-wrap:break-word

word-break work-wrap的区别示例介绍

Zusammenfassung:

Wortumbruch: Wenn ein Wort nicht am Ende der Zeile platziert werden kann, bestimmen Sie, wie das Wort darin platziert werden soll => Bestimmen Sie, ob das Wort in eine neue Zeile umgebrochen wird, wenn das Wort nicht möglich ist am Ende des Satzes platziert werden

Alle umbrechen: Zwangsweise platzieren. Wenn die verbleibenden Elemente nicht eingequetscht werden können, werden sie in der nächsten Zeile angezeigt.

keep-all: Wenn es nicht passt, zeigen Sie es in einer anderen Zeile an. Wenn es immer noch nicht passt, wird ein Überlauf angezeigt.

Wortumbruch: Wenn das Ende der Zeile nicht passt, entscheiden Sie, ob ein Zeilenumbruch innerhalb des Wortes zulässig ist => Bestimmen Sie, wie das Wort innerhalb des Wortes umbrochen werden soll

normal: Das Wort ist zu lang, und das Wort wird in eine neue Zeile umgebrochen. Wenn es mehr als eine Zeile ist, wird die Anzeige „Überlauf“ angezeigt.

break-word: Wenn das Wort zu lang ist, versuchen Sie es zuerst mit einem Zeilenumbruch. Wenn es nach dem Zeilenumbruch immer noch zu lang ist, können Sie auch eine Zeile innerhalb des Wortes umbrechen.

Zusätzlich: Text an beiden Enden ausrichten

Attribut: text-align:justify;

Kompatibilität: Sehr schlecht

word-break work-wrap的区别示例介绍

text-align:center;

word-break work-wrap的区别示例介绍

text-align:justify;

word-break work-wrap的区别示例介绍

Die obige kurze Analyse des Unterschieds zwischen Wortumbruch und Umbruch ist der gesamte vom Herausgeber geteilte Inhalt. Ich hoffe, dass er Ihnen eine Referenz geben kann, und ich hoffe auch, dass jeder die chinesische PHP-Website unterstützt.

Weitere Beispiele für den Unterschied zwischen Wortumbruch und verwandten Artikeln finden Sie auf der chinesischen PHP-Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage