CSS force les sauts de ligne non autorisés

CSS est une technologie essentielle dans le développement front-end. Il peut embellir le site Web et rendre la page Web plus lisible. En CSS, nous pouvons contrôler le style des éléments grâce à certains attributs, tels que la couleur, la police, la position, la taille, etc. Parmi eux, l'interdiction forcée des sauts de ligne est également un attribut de style très courant. Cet article présentera en détail l'utilisation et l'application pratique de cet attribut.

L'attribut en CSS qui interdit de force les sauts de ligne

En CSS, nous utilisons l'attribut white-space pour contrôler la façon dont le texte est traité à l'intérieur de l'élément. Parmi eux, les valeurs d'attribut​​sont les suivantes :

• normal : traiter le texte normalement. Plusieurs espaces ou sauts de ligne consécutifs seront fusionnés en un seul espace et seront automatiquement renvoyés à la ligne.
• nowrap : le texte ne sera pas renvoyé à la ligne, c'est-à-dire qu'il ne sera pas automatiquement renvoyé à la ligne lorsqu'il rencontrera un espace ou un caractère de nouvelle ligne.
• pre : les espaces et les sauts de ligne sont conservés et le texte ne sera pas automatiquement renvoyé à la ligne. Les sauts de ligne doivent être ajoutés manuellement.
• pré-enveloppement : conservez les espaces et les nouvelles lignes, mais le texte sera automatiquement renvoyé à la ligne.
• pré-ligne : le texte sera automatiquement renvoyé à la ligne, mais les espaces et les nouvelles lignes consécutifs seront ignorés.

Dans les applications pratiques, nous pouvons utiliser ces attributs pour contrôler la façon dont le texte est affiché afin d'obtenir l'effet souhaité. Parmi eux, lorsque nous devons forcer les sauts de ligne à ne pas être autorisés, nous pouvons utiliser l'attribut nowrap.

Scénarios d'application de nowrap

Dans le développement front-end quotidien, nous rencontrerons des situations où nous devons limiter le retour à la ligne du texte, telles que :

• Lors de l'affichage de données dans un tableau, le contenu de certaines cellules est trop long, et nous voulons que tout le contenu soit affiché sur la même ligne au lieu de s'enrouler.
• Dans la barre de navigation, si chaque élément de menu est une seule ligne de texte, cela peut efficacement éviter d'autres problèmes de style et de mise en page, et l'interface sera plus propre et plus concise.
• Lors de l'utilisation de CSS pour la mise en page du texte, afin d'éviter trop d'espace blanc vertical, l'attribut nowrap peut être utilisé pour afficher tout le texte sur une seule ligne, rendant ainsi la mise en page plus compacte.

Dans toutes les situations ci-dessus, l'attribut nowrap peut être utilisé pour forcer le texte à ne pas autoriser les sauts de ligne.

Utilisation spécifique de nowrap

Nous pouvons utiliser des feuilles de style CSS ou des styles en ligne pour définir le style du texte à nowrap. Voici des exemples de deux utilisations :

/* 在样式表中设置 */
.no-wrap {
  white-space: nowrap;
}

/* 在HTML元素内部设置 */
<div style="white-space:nowrap;">这一整段文本不允许换行</div>

En définissant l'attribut d'affichage du texte sur inline-block ou block, et en ajoutant l'attribut nowrap, vous pouvez obtenir une seule ligne sans retour à la ligne, et en même temps, elle ne sera pas masquer une partie du contenu, mais autoriser le défilement horizontal pour afficher le texte intégral. Par exemple, l'exemple suivant :

/* 在样式表中设置 */
.text-nowrap {
  display: inline-block;
  white-space: nowrap;
  overflow: scroll;
  max-width: 100%;
}

Cette méthode de paramétrage convient pour restreindre le texte dans un conteneur de largeur fixe sans retour à la ligne, tout en permettant le défilement horizontal.

Résumé

En CSS, forcer l'absence de saut de ligne est un attribut de style courant. Grâce à la valeur nowrap de l'attribut white-space, nous pouvons facilement implémenter la restriction d'absence de saut de ligne d'une seule ligne de texte. Dans le développement réel, l'affichage de texte sans sauts de ligne est généralement appliqué à des scénarios tels que les tableaux, les barres de navigation et la disposition du texte. En définissant l'attribut display et l'attribut overflow, nous pouvons également faire défiler le texte horizontalement sans dépasser la largeur du conteneur, affichant ainsi l'intégralité du contenu.

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!