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

WBOY
Freigeben: 2021-11-19 14:38:58
Original
8008 Leute haben es durchsucht

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“. ;}".

So legen Sie div über den Zeilenumbruch hinaus in CSS fest

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;
Nach dem Login kopieren

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>
Nach dem Login kopieren

Ausgabeergebnis:

So legen Sie div über den Zeilenumbruch hinaus in CSS fest

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!

Verwandte Etiketten:
css
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