So stellen Sie den automatischen Zeilenumbruch in CSS ein-CSS-Tutorial-php.cn

So stellen Sie den automatischen Zeilenumbruch in CSS ein

coldplay.xixi

Freigeben： 2023-02-17 16:47:12

Original

12152 Leute haben es durchsucht

So richten Sie den automatischen Zeilenumbruch in CSS ein: Verwenden Sie das Attribut [word-break], um dem Browser zu ermöglichen, eine Zeile an jeder Position umzubrechen. Der Code ist [.p3{width:200px;border:1px solid #ccc;word -break:break- all].

So stellen Sie den automatischen Zeilenumbruch in CSS ein

Die Betriebsumgebung dieses Tutorials: Windows 7-System, CSS3- und HTML5-Version, DELL G3-Computer.

So richten Sie den automatischen Zeilenumbruch in CSS ein:

Automatischer Zeilenumbruch: Mithilfe des Attributs word-break können Sie dem Browser erlauben, Zeilen an jeder Position umzubrechen. word-break属性，可以让浏览器实现在任意位置换行

它有三个属性值分别为：

normal：浏览器中的默认换行行为
break-all：可允许在单词内换行
keep-all
Es gibt drei Attributwerte:

normal

break- all: Zeilenumbrüche innerhalb von Wörtern sind erlaubt

So stellen Sie den automatischen Zeilenumbruch in CSS ein

keep-all: Zeilenumbrüche können nur an Leerzeichen halber Breite oder Bindestrichen vorgenommen werden

Beispiel:

<style>
.p1{
width:200px;
border:1px solid #ccc;
word-break:normal;
}
 
.p2{
width:200px;
border:1px solid #ccc;
word-break:keep-all;
}
 
.p3{width:200px;
border:1px solid #ccc;
word-break:break-all;
}
</style>
</head>
<body>
<p class="p1">Php Chinese website provides a large number of free, original, 
high-definition php video tutorials.</p>
<p class="p2">Php Chinese website provides a large   number of free, 
original, high-definition php video tutorials.</p>
<p class="p3">Php Chinese website provides a large number of free, original,
 high-definition php video tutorials.</p>
</body>

Nach dem Login kopieren

Rendering:

🎜 🎜🎜🎜🎜Verwandte Tutorial-Empfehlungen: 🎜CSS-Video-Tutorial🎜🎜🎜

Das obige ist der detaillierte Inhalt vonSo stellen Sie den automatischen Zeilenumbruch in CSS ein. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!