CSS n'enveloppe pas le style

Dans la conception Web, la beauté et la lisibilité de la mise en page sont cruciales pour l'expérience utilisateur de la page. Si un long texte ne peut pas être automatiquement renvoyé à la ligne, cela affectera l'expérience de lecture de l'utilisateur. Cela affectera non seulement la beauté de la page, mais réduira également l'expérience de l'utilisateur. Par conséquent, lors de la conception de pages Web, savoir utiliser correctement les styles CSS pour obtenir un retour à la ligne automatique est une compétence très importante.

En CSS, il existe plusieurs propriétés qui peuvent contrôler la façon dont le texte est renvoyé à la ligne. Parmi eux, le plus courant est l'attribut white-space, qui contrôle si l'élément conserve les espaces et les nouvelles lignes, et comment gérer les espaces et les nouvelles lignes dans le texte. white-space 属性，这个属性控制元素是否保留空格和换行符，以及如何处理文本中的空格和换行符。

白板符（white-space）属性有以下三个取值：

1. normal：默认值。标准的换行规则适用，连续的空格和换行符会被压缩为一个空格或者一个换行符，除非在文本内部使用了CSS或者HTML来进行换行。
2. pre：文本中的空格和换行符会被保留，文本将按照原样显示。
3. nowrap：文本在遇到空格或换行符时不会换行，而是继续在同一行上显示。

下面我们将实现三个不换行的示例，来演示如何在CSS中使用 white-space 属性实现不换行样式。

示例一：强制文本在同一行上显示

在这个示例中，我们将展示如何使文本在一个行内显示，不进行换行处理。我们将使用 white-space 属性的 nowrap 值来实现此目的。具体实现方法如下：

.nowrap {
  white-space: nowrap;
}

这个样式将会强制所有元素的文本内容在同一行上显示，在遇到空格或者换行符时不会换行。下面我们来看一个实例：

<div class="nowrap">
  这是一个很长的文本，我们在这里使它不进行换行处理。
</div>

这里的文本将会在遇到空格或者换行符时不会进行换行处理，而会一直在同一行上显示。

示例二：文字超出容器部分隐藏

在这个示例中，我们将展示如何使文本在遇到宽度限制时，超出容器部分进行隐藏。我们将使用 overflow 属性和 text-overflow 属性来实现此目的。具体实现方法如下：

.overflow {
  width: 300px; /* 给容器指定宽度，超出部分进行隐藏 */
  white-space: nowrap; /* 禁止文本换行 */
  overflow: hidden; /* 超出部分进行隐藏 */
  text-overflow: ellipsis; /* 超出部分使用“...”进行省略 */
}

这个样式将会对元素进行限制宽度，超出部分进行隐藏，并使用“...”进行省略。下面我们来看一个实例：

<div class="overflow">
  这是一个很长的文本，我们将它放在容器中限制宽度，并使超出部分进行隐藏，使用“...”进行省略。
</div>

这里的文本在超出容器的部分将会被省略，并用“...”代替。

示例三：单词不被分割

在这个示例中，我们将展示如何避免单词被分割在不同的行中。我们将使用 white-space 属性的 pre

L'attribut white-space a les trois valeurs suivantes :

1. normal : valeur par défaut. Les règles de saut de ligne standard s'appliquent et les espaces et sauts de ligne consécutifs sont compressés en un seul espace ou saut de ligne, à moins que CSS ou HTML ne soient utilisés pour couper des lignes dans le texte.
2. pre : les espaces et les sauts de ligne dans le texte seront conservés et le texte sera affiché tel quel.
3. nowrap : le texte ne sera pas renvoyé à la ligne lorsqu'il rencontrera un espace ou un caractère de nouvelle ligne, mais continuera à être affiché sur la même ligne.

Ci-dessous, nous allons implémenter trois exemples sans saut de ligne pour montrer comment utiliser l'attribut white-space en CSS pour implémenter des styles sans saut de ligne.

Exemple 1 : Forcer l'affichage du texte sur la même ligne

Dans cet exemple, nous allons montrer comment afficher du texte sur une ligne sans retour à la ligne. Nous utiliserons la valeur nowrap de l'attribut white-space pour y parvenir. La méthode d'implémentation spécifique est la suivante :

.no-split {
  white-space: pre;
}

Ce style forcera le contenu du texte de tous les éléments à être affiché sur la même ligne et ne sera pas renvoyé lors de la rencontre d'espaces ou de caractères de nouvelle ligne. Jetons un coup d'œil à un exemple : 🎜

<div class="no-split">
  这是一个带有多个空格的文本，我们将使单词不被分割在不同的行中。
</div>

🎜Le texte ici ne sera pas renvoyé à la ligne lorsqu'il rencontrera un espace ou un caractère de nouvelle ligne, mais sera toujours affiché sur la même ligne. 🎜

Exemple 2 : Masquer le texte au-delà du conteneur

🎜Dans cet exemple, nous montrerons comment masquer le texte au-delà du conteneur lorsqu'il rencontre la limite de largeur. Nous utiliserons l'attribut overflow et l'attribut text-overflow pour y parvenir. La méthode d'implémentation spécifique est la suivante : 🎜rrreee🎜Ce style limitera la largeur de l'élément, masquera la partie excédentaire et utilisera "..." pour l'omettre. Regardons un exemple ci-dessous : 🎜rrreee🎜Le texte ici sera omis au-delà du conteneur et remplacé par "...". 🎜

Exemple 3 : Les mots ne sont pas divisés

🎜Dans cet exemple, nous allons montrer comment éviter que les mots ne soient divisés sur des lignes différentes. Nous utiliserons la valeur pre de l'attribut white-space pour y parvenir. La méthode de mise en œuvre spécifique est la suivante : 🎜rrreee🎜Ce style conservera le format original des mots dans le texte, c'est-à-dire empêchera les mots d'être séparés en différentes lignes. Regardons un exemple ci-dessous : 🎜rrreee🎜 Les espaces ici seront conservés en fonction du format du texte, et les mots ne seront pas divisés en différentes lignes. 🎜🎜Pour résumer, l'exemple ci-dessus montre comment utiliser les styles CSS pour contrôler la façon dont le texte est renvoyé à la ligne. Lors de la conception de pages Web, l’utilisation précise de ces attributs peut améliorer l’esthétique et l’expérience utilisateur de la page Web. 🎜

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!