Heim >Web-Frontend >CSS-Tutorial >So verwenden Sie das Wortumbruch-Attribut

So verwenden Sie das Wortumbruch-Attribut

青灯夜游
青灯夜游Original
2019-02-11 15:17:196555Durchsuche

Das Wortumbruch-Attribut wird verwendet, um Zeilenumbruchregeln für Nicht-CJK-Skripte (Chinesisch, Japanisch und Koreanisch) anzugeben, und gibt die Verarbeitungsmethode des automatischen Zeilenumbruchs an. Mithilfe des Wortumbruch-Attributs können Sie dem Browser ermöglichen, an jeder beliebigen Stelle eine Zeile umzubrechen.

So verwenden Sie das Wortumbruch-Attribut

CSS3-Wortumbruch-Attribut

Funktion: Wortumbruch-Attribut Gibt an, wie mit dem automatischen Zeilenumbruch umgegangen wird.

Tipp: Durch die Verwendung des Wortumbruch-Attributs können Sie dem Browser erlauben, eine Zeile an jeder Position umzubrechen.

Syntax:

word-break: normal|break-all|keep-all;

normal: Verwenden Sie die standardmäßigen Zeilenumbruchregeln des Browsers.

Alle umbrechen: Zeilenumbrüche innerhalb von Wörtern zulassen.

keep-all: Bei halbbreiten Leerzeichen oder Bindestrichen können nur Zeilenumbrüche vorgenommen werden.

Hinweis: Alle gängigen Browser unterstützen das Wortumbruch-Attribut. Opera unterstützt das Wortumbruch-Attribut jedoch nicht.

Verwendungsbeispiel des CSS3-Wortumbruchattributs

<!DOCTYPE html>
<html>
<head>
<style> 
p.test1
{
width:11em; 
border:1px solid #000000;
word-break:keep-all;
}
p.test2
{
width:11em; 
border:1px solid #000000;
word-break:break-all;
}
p.test3
{
width:11em; 
border:1px solid #000000;
word-break:keep-all;
}
p.test4
{
width:11em; 
border:1px solid #000000;
word-break:break-all;
}
</style>
</head>
<body>
<p class="test1">This is a veryveryveryveryveryveryveryveryveryvery long paragraph.</p>
<p class="test2">This is a veryveryveryveryveryveryveryveryveryvery long paragraph.</p>
<p class="test3">This paragraph contains some text: The lines will break at any character.</p>
<p class="test4">This paragraph contains some text: The lines will break at any character.</p>
</body>
</html>

Rendering:

So verwenden Sie das Wortumbruch-Attribut

Referenz für diesen Artikel:https://www.html.cn/book/css/properties/text/word-break.htm

Das obige ist der detaillierte Inhalt vonSo verwenden Sie das Wortumbruch-Attribut. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

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