Comment empêcher le texte d'être renvoyé à la ligne à l'aide de CSS

Dans le développement Web, le texte sans retour à la ligne est une exigence très courante. Qu'il s'agisse de texte dans un paragraphe ou du nom d'un groupe d'images, vous devez éviter les mots longs ou les sauts de ligne. Alors, comment obtenir un texte insécable via CSS ?

Tout d'abord, nous devons comprendre plusieurs propriétés CSS :

1. white-space

white-space

该属性用于设置元素中的空白符如何处理。常见的属性值有：

• normal: 会忽略额外的空白符，连续的空白符会合并成一个空格，并在必要时断行
• pre: 会保留额外的空白符，但不会自动换行
• nowrap: 会忽略额外的空白符，但不会自动换行
• pre-wrap: 会保留额外的空白符，并在必要时自动换行
• pre-line: 会忽略额外的空白符，但在必要时自动换行

2. word-break

该属性用于设置单词的断行规则。常见的属性值有：

• normal: 使用浏览器默认的断行规则
• break-all: 允许在单词内断行，适用于不间断文本（如URL）
• keep-all: 尽可能不断行，适用于中文和日文等连续字符组成的文本

3. overflow-wrap

该属性用于控制在元素边界内的断行规则，也就是说，它会影响单词的断行位置。常见的属性值有：

• normal: 使用浏览器默认的断行规则
• break-word: 当一个单词超出元素边界时，强制换行

接下来，我们可以通过这些属性来实现文本的不换行。

方法一：使用white-space和overflow-wrap

首先，我们可以将空白符合并成一个空格，然后在必要时自动换行。这可以通过设置white-space属性为nowrap和overflow-wrap属性为break-word实现。例如：

p {
  white-space: nowrap;
  overflow-wrap: break-word;
}

这样，当单词太长超出元素边界时，浏览器会将其强制断开，并在下一行继续显示。

方法二：使用word-break和white-space

另一种方法是在保留空白符的情况下，设置单词的断行规则。我们可以将word-break属性设置为keep-all，同时将white-space属性设置为nowrap。例如：

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

这样，浏览器会尽可能不在单词内断行，并在必要时将单词打破，不会影响排版的美观程度。

方法三：使用word-wrap

对于不支持overflow-wrap属性的浏览器，我们可以使用word-wrapCette propriété est utilisée pour définir la façon dont les caractères d'espacement dans les éléments sont gérés. Les valeurs d'attribut courantes sont :

normal : les caractères d'espacement supplémentaires seront ignorés, les caractères d'espacement consécutifs seront fusionnés en un seul espace et les lignes seront interrompues si nécessaire

pre : conservera les caractères d'espacement supplémentaires, mais ne sera pas renvoyé automatiquement

nowrap : ignorera les caractères d'espacement supplémentaires, mais ne sera pas renvoyé automatiquement

pre-wrap : conservera les caractères d'espacement supplémentaires et les retournera automatiquement si nécessaire

pre-line : ignorera les caractères d'espacement supplémentaires, mais si nécessaire, le retour à la ligne automatique

word-break

🎜Cet attribut est utilisé pour définir les règles de saut de ligne pour les mots. Les valeurs d'attribut courantes sont : 🎜

🎜normal : utiliser les règles de saut de ligne par défaut du navigateur🎜break-all : autoriser les sauts de ligne dans les mots, applicable Pour le texte ininterrompu (tel qu'une URL) 🎜garder tout : autant que possible, adapté au texte composé de caractères continus tels que le chinois et le japonais

🎜overflow-wrap

🎜Cet attribut est utilisé pour contrôler les règles de saut de ligne dans les limites de l'élément, c'est-à-dire qu'il affecte la ligne rupture de position des mots. Les valeurs d'attribut courantes sont : 🎜

🎜normal : utiliser les règles de saut de ligne par défaut du navigateur🎜break-word : lorsqu'un mot dépasse l'élément border , forcer les sauts de ligne

🎜Ensuite, nous pouvons utiliser ces propriétés pour obtenir du texte sans sauts de ligne. 🎜🎜Méthode 1 : utilisez white-space et overflow-wrap🎜🎜Tout d'abord, nous pouvons fusionner les caractères d'espacement en un seul espace, puis envelopper automatiquement les lignes si nécessaire. Ceci peut être réalisé en définissant l'attribut white-space sur nowrap et l'attribut overflow-wrap sur break-word. Par exemple : 🎜

p {
  word-wrap: break-word;
}

🎜De cette façon, lorsqu'un mot est trop long et dépasse les limites de l'élément, le navigateur forcera sa rupture et continuera à s'afficher sur la ligne suivante. 🎜🎜Méthode 2 : utilisez word-break et white-space🎜🎜Une autre méthode consiste à définir des règles de saut de ligne pour les mots tout en conservant les caractères d'espacement. Nous pouvons définir l'attribut word-break sur keep-all et l'attribut white-space sur nowrap . Par exemple : 🎜rrreee🎜De cette façon, le navigateur essaiera de ne pas couper les lignes dans les mots et de couper les mots lorsque cela est nécessaire, sans affecter la beauté de la mise en page. 🎜🎜Méthode 3 : Utiliser word-wrap🎜🎜Pour les navigateurs qui ne prennent pas en charge l'attribut overflow-wrap, nous pouvons utiliser le word-wrap remplacement de l'attribut. Par exemple : 🎜rrreee🎜De cette façon, lorsqu'un mot est trop long et dépasse les limites de l'élément, le navigateur le forcera à se casser et à continuer à s'afficher sur la ligne suivante. 🎜🎜Résumé🎜🎜Ci-dessus, il existe plusieurs façons d'obtenir du texte sans sauts de ligne. Différentes combinaisons d’attributs sont nécessaires dans différentes situations pour obtenir les meilleurs résultats. En développement, vous devez faire des choix en fonction de circonstances spécifiques, plutôt que d’utiliser aveuglément une certaine méthode. 🎜

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!