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.
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;//表示以字母为单位换行。
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>Ausgabeergebnis:
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!
