Heim > Web-Frontend > CSS-Tutorial > So verwenden Sie CSS, um Buchstaben umzubrechen, wenn sie weniger als eine Zeile lang sind

So verwenden Sie CSS, um Buchstaben umzubrechen, wenn sie weniger als eine Zeile lang sind

WBOY
Freigeben: 2021-11-15 15:30:43
Original
2479 Leute haben es durchsucht

So brechen Sie CSS-Buchstaben um, wenn weniger als eine Zeile vorhanden ist: 1. Fügen Sie dem Element den Stil „word-break:break-word;“ hinzu, um es in Worteinheiten umzubrechen. break-all“ zum Element ;“-Stil, um Buchstaben in Buchstabeneinheiten umzubrechen.

So verwenden Sie CSS, um Buchstaben umzubrechen, wenn sie weniger als eine Zeile lang sind

Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer.

So brechen Sie CSS-Buchstaben um, wenn sie weniger als eine Zeile lang sind

Öffnen Sie eine HTML-Codeseite, erstellen Sie zwei div-Tags und geben Sie einen englischen Satz ein. Legen Sie zwei CSS-Stile fest: automatischer Zeilenumbruch nach Buchstaben und automatischer Zeilenumbruch.

word-break:break-word;//表示以单词为单位换行,
word-break:break-all;//表示以字母为单位换行。
Nach dem Login kopieren

Der Code lautet wie folgt:

<!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>
    <style>
    .aa{
        width:150px;
        word-break:break-word;
    }
    .bb{
        width:150px;
        word-break:break-all;
    }
    </style>
</head>
<body>
    <div class="aa">When summer comes, unlike most people, I will be very excited, because I like summer very much. People don’t like summer because of its hot weather, which makes people sweat all the time. But summer is my favorite season, I can wear fewer clothes. I like to wear short jeans and a T-shirt, I feel so free.</div>
    <div class="bb">When summer comes, unlike most people, I will be very excited, because I like summer very much. People don’t like summer because of its hot weather, which makes people sweat all the time. But summer is my favorite season, I can wear fewer clothes. I like to wear short jeans and a T-shirt, I feel so free.</div>
</body>
</html>
Nach dem Login kopieren

Ausgabeergebnis:

So verwenden Sie CSS, um Buchstaben umzubrechen, wenn sie weniger als eine Zeile lang sind

So verwenden Sie CSS, um Buchstaben umzubrechen, wenn sie weniger als eine Zeile lang sind

Die oben genannten sind zwei verschiedene Zeilenumbruchmethoden.

Weitere Kenntnisse zum Thema Programmierung finden Sie unter: Programmiervideos! !

Das obige ist der detaillierte Inhalt vonSo verwenden Sie CSS, um Buchstaben umzubrechen, wenn sie weniger als eine Zeile lang sind. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

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