Heim > Artikel > Web-Frontend > So erreichen Sie keine Zeilenumbrüche in CSS
So erreichen Sie keine Zeilenumbrüche in CSS
- coldplay.xixiOriginal
- 2021-04-15 17:25:493990Durchsuche
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!