Comment empêcher le texte de s'enrouler en CSS

Dans le développement Web, il arrive souvent qu'un paragraphe entier de texte doive être affiché dans une cellule ou un conteneur, mais le texte est trop long, ce qui entraîne des sauts de ligne qui affectent l'apparence. À ce stade, nous pouvons utiliser le contrôle de style CSS pour empêcher le texte de s'enrouler et obtenir une mise en page plus belle.

Voici quelques façons de contrôler que le texte ne soit pas enveloppé en CSS.

1. Attribut White-space

En CSS, l'attribut white-space est utilisé pour contrôler la disposition du texte. Par défaut, la valeur de l'attribut white-space est "normale", c'est-à-dire que lorsqu'il rencontre des caractères d'espacement tels que des espaces, des nouvelles lignes, des tabulations, etc., il sera automatiquement renvoyé à la ligne et ne sera plus composé en avant. Nous avons juste besoin de le définir sur "nowrap" pour que le texte ne soit pas renvoyé à la ligne.

L'exemple est le suivant :

.container {
  white-space: nowrap;
}

Dans le code ci-dessus, .container représente le conteneur qui doit être stylisé. Définissez white-space sur nowrap. Cela empêchera le texte de s'enrouler. .container表示需要进行样式控制的容器，将white-space设为nowrap即可让文本不换行。

二、overflow属性

另一种控制文本不换行的方法是使用overflow属性。利用这个属性可以让容器中内容超出容器范围时，隐藏或显示滚动条。在这里，我们可以将overflow的值设置为“hidden”，这样可以将支流超出容器范围的文本隐藏，同时文本也不会换行。

示例如下：

.container {
  overflow: hidden;
}

上述代码中，.container表示进行样式控制的容器，将overflow设为hidden即可让文本不换行。

三、text-overflow属性

在一些情况下，文本太长，但不能隐藏，需要显示部分文本内容，并以省略号表示未显示部分，这时就可以使用text-overflow属性。利用这个属性可以让文本超过一定长度时显示省略号，同时文本不会换行。

示例如下：

.container {
  overflow: hidden;   /* 必须要设置overflow属性值为“hidden” */
  white-space: nowrap;  /* 禁止文本换行 */
  text-overflow: ellipsis;  /* 超出容器大小的文本以省略号表示 */
}

上述代码中，.container表示进行样式控制的容器，将overflow设为hidden、white-space设为nowrap和text-overflow设为ellipsis

2. Attribut de débordement

Une autre façon de contrôler le retour à la ligne du texte consiste à utiliser l'attribut de débordement. Utilisez cet attribut pour masquer ou afficher la barre de défilement lorsque le contenu du conteneur dépasse la portée du conteneur. Ici, nous pouvons définir la valeur de débordement sur "caché", de sorte que le texte de l'affluent au-delà de la portée du conteneur puisse être masqué et que le texte ne soit pas renvoyé à la ligne.

Un exemple est le suivant : 🎜rrreee🎜Dans le code ci-dessus, .container représente le conteneur pour le contrôle de style. Définissez overflow sur hidden. pour le faire Le texte ne s'enroule pas. 🎜🎜3. Attribut de débordement de texte 🎜🎜Dans certains cas, le texte est trop long mais ne peut pas être masqué. Une partie du texte doit être affichée et la partie non affichée est représentée par des points de suspension. L'attribut peut être utilisé. Utilisez cet attribut pour afficher des points de suspension lorsque le texte dépasse une certaine longueur et que le texte ne sera pas renvoyé à la ligne. 🎜🎜L'exemple est le suivant : 🎜rrreee🎜Dans le code ci-dessus, .container représente le conteneur pour le contrôle de style. Définissez overflow sur hidden. , white-space sur nowrap et text-overflow sur ellipsis pour empêcher le texte de s'enrouler et afficher des points de suspension. 🎜🎜Résumé : 🎜🎜Ce qui précède présente trois méthodes pour contrôler le texte à ne pas renvoyer à la ligne, en utilisant l'attribut d'espace blanc, l'attribut de débordement et l'attribut de débordement de texte. La méthode à utiliser dépend des besoins spécifiques. Pendant le processus de développement, dans un souci de beauté et de lisibilité, nous devons maîtriser ces compétences de base en matière de contrôle de style 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!