Heim >Web-Frontend >CSS-Tutorial >So legen Sie div über den Zeilenumbruch hinaus in CSS fest
So legen Sie div über den Zeilenumbruch hinaus in CSS fest
- WBOYOriginal
- 2021-11-19 14:38:588036Durchsuche
In CSS können Sie das Attribut „word-break“ verwenden, um den Div-Inhalt über den Zeilenumbruch hinaus zu erzielen. Die Syntax lautet „div{word-break:break-all“. ;}".
Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer.
So legen Sie div über den Zeilenumbruch hinaus in CSS fest
In CSS können Sie das Wortumbruch-Attribut verwenden, um die Verarbeitungsmethode des automatischen Zeilenumbruchs anzugeben.
Durch die Verwendung des Word-Break-Attributs kann der Browser an jeder Position einen Zeilenumbruch erzielen.
Die Syntax lautet:
word-break: normal|break-all|keep-all;
Es ist zu beachten, dass:
normal bedeutet, dass die standardmäßigen Zeilenumbruchregeln des Browsers verwendet werden.
break-all bedeutet, dass Zeilenumbrüche innerhalb von Wörtern zulässig sind.
keep-all bedeutet, dass Zeilenumbrüche nur bei Leerzeichen halber Breite oder Bindestrichen vorgenommen werden können.
Nehmen wir ein Beispiel, um zu sehen, wie man das Div über den Zeilenumbruch hinaus festlegt. Das Beispiel sieht wie folgt aus:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<style type="text/css">
div{
width:50px;
word-break:break-all;
}
</style>
<div>
aaaaaaaaaaaaaaaaaaaaaaaaaaaa
</div>
</body>
</html>Ausgabeergebnis:
Weitere Programmierkenntnisse finden Sie unter: Programmierung Video! !
Das obige ist der detaillierte Inhalt vonSo legen Sie div über den Zeilenumbruch hinaus in CSS fest. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!