Heim > Artikel > Web-Frontend > So verhindern Sie, dass div in CSS eingeschlossen wird
In CSS können Sie das Attribut „white-space“ verwenden, um zu verhindern, dass das div umbrochen wird. Sie müssen nur den Stil „white-space:nowrap;“ hinzufügen. Das Attribut „white-space“ kann festlegen, wie mit Leerzeichen innerhalb des Elements umgegangen wird. Wenn der Attributwert auf „nowrap“ gesetzt ist, wird der Text des angegebenen Elements nicht umgebrochen. Der Text wird in derselben Zeile fortgesetzt, bis das br-Tag gefunden wird .
Die Betriebsumgebung dieses Artikels: Windows 7-System, HTML5- und CSS3-Version, Dell G3-Computer.
Wie man mit CSS dafür sorgt, dass Divs nicht umgebrochen werden
Sie können CSS verwenden, um den Text im entsprechenden Div-Tag umzubrechen oder nicht umzubrechen. Sehen wir uns an, wie man mit CSS den Text im Div festlegt Tag, der nicht umbrochen werden soll.
Wenn der Text in einem Div nicht in einer Zeile angezeigt werden kann, wird er standardmäßig automatisch umbrochen und angezeigt.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PHP中文网</title>
<style>
.content {
width: 150px;
height: 60px;
background-color: lightcyan;
}
</style>
</head>
<body>
<div class="content">
PHP中文网 欢迎您 欢迎您 欢迎您
</div>
</body>
</html>Rendering:
Wenn der Text in einer Zeile angezeigt werden soll, brechen Sie ihn nicht automatisch um. Stellen Sie einfach den Leerraumstil auf „nowrap“ ein.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PHP中文网</title>
<style>
.content {
width: 150px;
height: 60px;
background-color: lightcyan;
white-space: nowrap;
}
</style>
</head>
<body>
<div class="content">
PHP中文网 欢迎您 欢迎您 欢迎您
</div>
</body>
</html>Rendering:
Einführung in das White-Space-Attribut
Das White-Space-Attribut legt fest, wie mit dem Leerraum innerhalb des Elements umgegangen wird.
Dieses Attribut legt fest, wie mit Leerzeichen in Elementen während des Layoutprozesses umgegangen wird.
Attributwert:
normaler Standard. Leerzeichen werden vom Browser ignoriert.
pre Leerraum wird vom Browser beibehalten. Es verhält sich wie das
-Tag in HTML.
nowrap Der Text wird nicht umgebrochen, der Text wird in derselben Zeile fortgesetzt, bis das Tag
gefunden wird.
pre-wrap Behält Leerzeichensequenzen bei, wird aber normal umbrochen.
pre-line führt Leerzeichensequenzen zusammen, behält aber Zeilenumbrüche bei.
inherit gibt an, dass der Wert des Leerraumattributs vom übergeordneten Element geerbt werden soll.
【Empfohlenes Lernen: CSS-Video-Tutorial】
Das obige ist der detaillierte Inhalt vonSo verhindern Sie, dass div in CSS eingeschlossen wird. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!