Die Methode zum Realisieren von Zeilenumbrüchen in CSS verwendet das Attribut [word-break], um die Verarbeitung automatischer Zeilenumbrüche anzugeben, wodurch der Browser Zeilenumbrüche an jeder Position realisieren kann. Die Syntax lautet [word-break: normal| alles brechen|alles behalten].
Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3-Version, DELL G3-Computer.
Das Wortumbruch-Attribut 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.
Syntax:
word-break: normal|break-all|keep-all;
Attributwert:
normal Verwenden Sie die standardmäßigen Zeilenumbruchregeln des Browsers.
break-all ermöglicht Zeilenumbrüche innerhalb von Wörtern.
keep-all kann Zeilen nur mit Leerzeichen oder Bindestrichen halber Breite umbrechen.
Beispiel:
<!DOCTYPE html>
<html>
<head>
<style>
p.test1
{
width:11em;
border:1px solid #000000;
word-break:hyphenate;
}
p.test2
{
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><b>注释：</b>目前 Opera 不支持 word-break 属性。</p>
</body>
</html>Rendering:
Verwandte Lernempfehlungen: CSS-Tutorial
Das obige ist der detaillierte Inhalt vonSo erreichen Sie keine Zeilenumbrüche in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
