css empêche le texte de s'enrouler

Dans la conception et le développement de sites Web, nous devons généralement contrôler la mise en page et le style des éléments de page. L'un des problèmes les plus courants liés à la mise en page du texte est de savoir comment empêcher le retour à la ligne du texte. Cet article présentera quelques méthodes courantes en CSS pour vous aider à résoudre ce problème.

1. attribut white-space

L'attribut white-space détermine comment gérer l'espace blanc dans la zone de l'élément. Il a 5 valeurs facultatives : normal, nowrap, <code>pre, pre-wrap, pre-line. Leurs effets sont : white-space属性决定元素盒子中的空白如何处理，它有5个取值可选：normal、nowrap、pre、pre-wrap、pre-line。它们的效果分别是：

• normal：默认值，合并多余空白，文字不换行，文字在一行上放不下就自动换行；
• nowrap：不换行，这相当于把normal和pre的特性结合起来；
• pre：保留多余空白、不合并、不换行，如果需要换行需要手动添加`
  `；
• pre-wrap：保留多余空白、不合并、自动换行，如果出现需要换行的情况，则自动进行换行；
• pre-line：合并多余空白，文字在一行上放不下就自动换行。

因此，当我们需要让文字不自动换行时，可以使用white-space: nowrap。

div {
  white-space: nowrap;
}

当然，如果想要保留多余空白，也可以使用其他取值。例如，如果要使文字在一行上完整显示，可以使用white-space: pre。

div {
  white-space: pre;
}

2. word-break属性

在设置了white-space属性之后，如果文本长度超过了盒子的宽度，则会进行自动换行。这时需要使用word-break属性来控制文字的断行，它有3个取值可选：normal、break-all、keep-all。它们的效果分别是：

• normal：默认值，按照标准的断词规则，在单词之间进行断行；
• break-all：在单词之间进行断行，并且在英文单词内不考虑任何规则断行；
• keep-all：在单词之间断行，但是英文单词内不断行。

因此，可以通过将word-break属性的取值设置为keep-all，来让文字不进行自动换行。

div {
  white-space: nowrap;
  word-break: keep-all;
}

3. overflow属性

在部分情况下，即使通过white-space和word-break属性设置了正确的文字排版方式，文本长度也可能超出了盒子的宽度。这时需要使用overflow属性来控制文本的溢出效果。overflow属性有4个取值可选：visible、hidden、scroll、auto。它们的效果分别是：

• visible：默认值，不做任何处理，允许内容超过盒子范围显示在盒子外部；
• hidden：溢出部分隐藏，不可见；
• scroll：显示滚动条，用户可以通过滚动条来查看超出部分；
• auto：根据实际需要显示滚动条。

如果想让文字在一行上显示，不自动换行，并且溢出部分隐藏，可以结合使用white-space和overflow属性。

div {
  white-space: nowrap;
  overflow: hidden;
}

4. text-overflow属性

当使用overflow: hidden属性隐藏文本溢出部分时，有可能会导致用户看不到完整的文本内容。这时可以使用text-overflow属性来控制文本的溢出效果。text-overflow属性有2个取值可选：clip、ellipsis。它们的效果分别是：

• clip：将文本截断，并隐藏超出部分，不添加省略符号；
• ellipsis：将文本截断，并隐藏超出部分，添加省略符号（...）。

因此，可以通过将text-overflow属性的取值设置为ellipsis

• normal : valeur par défaut, fusionne les espaces en excès, le texte ne sera pas renvoyé à la ligne, le texte sera automatiquement renvoyé à la ligne s'il ne peut pas tenir sur une seule ligne ;
• nowrap : Pas de retour à la ligne, ce qui équivaut à combiner les fonctionnalités de normal et de pre
•  ; pre : conservez l'espace blanc en excès, ne fusionnez pas et n'encapsulez pas. Si vous avez besoin d'envelopper, vous devez ajouter `<br>` manuellement ;  : conserver l'espace blanc en excès, ne pas fusionner, retour à la ligne automatique, si un retour à la ligne est requis, il sera automatiquement renvoyé à la ligne ;
• pré-ligne : fusionner ; espace blanc en excès, et le texte sera automatiquement renvoyé à la ligne s'il ne peut pas tenir sur une seule ligne.

Ainsi, lorsque nous devons empêcher le retour à la ligne automatique du texte, nous pouvons utiliser white-space: nowrap.

div {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

Bien sûr, si vous souhaitez conserver un espace blanc supplémentaire, vous pouvez également utiliser d'autres valeurs. Par exemple, si vous souhaitez que le texte apparaisse entièrement sur une seule ligne, vous pouvez utiliser white-space: pre.

div::after {
  content: "a0";
}

2. attribut word-break

Après avoir défini l'attribut white-space, si la longueur du texte dépasse la largeur de la boîte, il sera automatiquement renvoyé à la ligne. À ce stade, vous devez utiliser l'attribut word-break pour contrôler le saut de ligne du texte. Il a trois valeurs facultatives : normal, break-all<.>, <code>garder tout. Leurs effets sont :

• normal : valeur par défaut, sauts de ligne entre les mots selon les règles standard de coupure de mots
• break -all ; > : Coupez les lignes entre les mots et ne tenez compte d'aucune règle de saut de ligne dans les mots anglais ;
• keep-all : Coupez les lignes entre les mots, mais il n'y a aucune ligne en anglais. mots.

Par conséquent, vous pouvez définir la valeur de l'attribut word-break sur keep-all pour empêcher le retour à la ligne automatique du texte. 🎜rrreee🎜3. attribut de débordement🎜🎜Dans certains cas, même si la méthode de formatage de texte correcte est définie via les attributs white-space et word-break, la longueur du texte peut dépasser la largeur de la boîte. À ce stade, vous devez utiliser l'attribut overflow pour contrôler l'effet de débordement du texte. L'attribut overflow a 4 valeurs optionnelles : visible, hidden, scroll, auto code>. Leurs effets sont : 🎜

• visible : valeur par défaut, aucun traitement n'est effectué, permettant au contenu dépassant le cadre de la boîte d'être affiché en dehors de la boîte
• caché : la partie de débordement est masquée et invisible ;
• scroll : la barre de défilement est affichée et l'utilisateur peut visualiser la partie de débordement à travers le défilement. bar;
• auto : Afficher les barres de défilement en fonction des besoins réels.

🎜Si vous souhaitez que le texte soit affiché sur une ligne sans retour à la ligne automatique et que la partie de débordement soit masquée, vous pouvez utiliser le espace blanc et le overflow attributs en combinaison. 🎜rrreee🎜4. attribut text-overflow🎜🎜Lors de l'utilisation de l'attribut <code>overflow: Hidden pour masquer la partie de débordement de texte, l'utilisateur peut ne pas voir le contenu complet du texte. À ce stade, vous pouvez utiliser l'attribut text-overflow pour contrôler l'effet de débordement du texte. L'attribut text-overflow a deux valeurs facultatives : clip, ellipsis. Leurs effets sont : 🎜

• clip : tronquer le texte et masquer la partie en excès sans ajouter d'ellipses
• points de suspension : tronquer le texte ; texte, masquez la partie excédentaire et ajoutez des symboles de points de suspension (...).

🎜Par conséquent, vous pouvez tronquer un texte trop long et ajouter des points de suspension en définissant la valeur de l'attribut text-overflow sur ellipsis . 🎜rrreee🎜5. Utiliser des pseudo-éléments🎜🎜En plus des méthodes ci-dessus, vous pouvez également contrôler que le texte ne soit pas renvoyé automatiquement en utilisant des pseudo-éléments en CSS. Par exemple, vous pouvez utiliser "

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!