Maison >interface Web >tutoriel CSS >Comment empêcher div de s'emballer en CSS

Comment empêcher div de s'emballer en CSS

藏色散人
藏色散人original
2021-03-02 10:42:277659parcourir

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. .

Comment empêcher div de s'emballer en CSS

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 :

Comment empêcher div de semballer en CSS

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 :

Comment empêcher div de semballer en CSS

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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn