Maison > Article > interface Web > Comment empêcher div de s'emballer en CSS
En CSS, vous pouvez utiliser l'attribut white-space pour empêcher le div de s'enrouler. Il vous suffit d'ajouter le style "white-space:nowrap;" à l'élément div. L'attribut white-space peut définir la manière de gérer les espaces dans l'élément. Lorsque la valeur de l'attribut est définie sur "nowrap", le texte de l'élément spécifié ne sera pas renvoyé à la ligne jusqu'à ce que la balise br soit rencontrée. .
L'environnement d'exploitation de cet article : système Windows 7, version HTML5&&CSS3, ordinateur Dell G3.
Comment faire en sorte que les divs ne soient pas enveloppés en utilisant CSS
Grâce au CSS, vous pouvez faire en sorte que le texte dans la balise div correspondante soit enveloppé ou non. Ci-dessous, nous verrons comment utiliser CSS pour définir le texte d'une balise div à ne pas envelopper.
Par défaut, si le texte d'un div ne peut pas être affiché sur une seule ligne, il sera automatiquement renvoyé à la ligne et affiché.
<!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>Rendu :
Si vous souhaitez que le texte soit affiché sur une seule ligne, ne l'enveloppez pas automatiquement. Définissez simplement le style d'espace blanc sur nowrap.
<!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>Rendu :
introduction de l'attribut d'espace blanc
blanc - Le L'attribut space définit comment gérer les espaces blancs dans l'élément.
Cet attribut déclare comment gérer les caractères d'espacement dans les éléments pendant le processus de mise en page.
Valeur de l'attribut :
normal par défaut. Les espaces blancs sont ignorés par le navigateur.
les pré-espaces seront conservés par le navigateur. Il se comporte comme la balise
nowrap Le texte ne sera pas renvoyé à la ligne, le texte continuera sur la même ligne jusqu'à ce que la balise
pre-wrap Préserve les séquences d'espaces, mais s'enroule normalement.
pre-line fusionne les séquences d'espaces mais conserve les nouvelles lignes.
inherit spécifie que la valeur de l'attribut white-space doit être héritée de l'élément parent.
[Apprentissage recommandé : Tutoriel vidéo CSS]
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!