Comment résoudre le débordement de texte CSS

Dans la conception de sites Web, il est courant de rencontrer du texte qui dépasse les limites des éléments. Le débordement de texte peut perturber la mise en page et affecter l'expérience utilisateur, mais une bonne connaissance du CSS peut nous aider à résoudre ce problème.

En fait, il existe plusieurs façons de contrôler la façon dont le texte est traité, et je les présenterai ci-dessous avec des exemples pratiques.

1. Ellipsis

Ellipsis est la méthode de traitement de troncature de texte la plus couramment utilisée, qui peut être utilisée pour tronquer une ou plusieurs lignes de texte.

Ellipses sur une seule ligne

Dans les situations où le texte sur une seule ligne est encombré, définir la largeur du conteneur de texte et le style des points de suspension au-delà du texte est une solution.

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

Dans le code, l'attribut white-space est défini sur nowrap, ce qui garantit que le texte est affiché sur une seule ligne sans créer d'espace supplémentaire. text-overflow : les points de suspension permettent de masquer les caractères du conteneur qui dépassent la largeur du conteneur et de les remplacer par des points de suspension lorsque le conteneur est petit.

Omission multiligne

Lorsque le texte multiligne dépasse la limite, vous pouvez définir le nombre de lignes pour afficher le texte dans la plage du nombre de lignes. Les propriétés CSS suivantes peuvent être appliquées :

.text-overflow {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

Dans ce code, utilisez display: -webkit-box et -webkit-box-orient: vertical pour définir le contenu du texte sur Flexbox orienté verticalement et limitez le texte à 3 lignes en définissant l'attribut -webkit-line-clamp. Enfin, utilisez overflow: Hidden pour contrôler tout texte de débordement. display: -webkit-box 和 -webkit-box-orient: vertical 将文本内容设置为垂直方向的弹性盒子，并通过设置 -webkit-line-clamp 属性将文本限定为3行。最后，使用 overflow: hidden 控制任何超出的文本。

2. 滚动文本

另一个解决超出文本的方法是让它在文本容器内滚动。这个方法可以在文本容器中按预定义的速度自动滚动文本，让超出的文本得到适当的处理。以下是相应的 CSS 属性：

.text-scroll {
  white-space: nowrap;
  overflow: hidden;
  animation: marquee 5s linear infinite;
}

@keyframes marquee {
  100% {
    transform: translateX(-100%);
  }
}

在此设置中， white-space: nowrap 和 overflow: hidden 将文本限制为 1 行并且会限制任何超出的文本。animation 则定义了一个 marquee 动画， 将文本向左滚动， infinite 属性使文本永无止境地滚动。

3. 处理空格和连字符

另一种解决溢出文本的方法是通过处理空格和连字符。这可以确保文本不被截断且完整地呈现给用户。以下是相应的 CSS 属性：

.text-wrap {
  word-wrap: break-word;
  white-space: pre-wrap;
  word-break: break-all;
  overflow-wrap: break-word;
}

在代码中 word-wrap: break-word 处理任何超出文本的单词或单字符，确保整个词或字符出现在下一行，并且它不会被破坏。 white-space: pre-wrap 将处理空格和连字符，确保它们的位置不会破坏文本内容。另外， word-break: break-all 和 overflow-wrap: break-word

Texte défilant

Une autre solution au débordement de texte consiste à le faire défiler à l'intérieur du conteneur de texte. Cette méthode peut faire défiler automatiquement le texte dans le conteneur de texte à une vitesse prédéfinie, afin que le texte en excès puisse être traité de manière appropriée. Voici les propriétés CSS correspondantes :

rrreee🎜Dans ce paramètre, white-space: nowrap et overflow: Hidden limitent le texte à 1 ligne et limiteront tout ce qui dépasse le texte. animation définit une animation marquee pour faire défiler le texte vers la gauche, et l'attribut infinite fait défiler le texte à l'infini. 🎜
🎜Gestion des espaces et des tirets 🎜🎜🎜Une autre façon de résoudre le débordement de texte consiste à gérer les espaces et les tirets. Cela garantit que le texte n'est pas tronqué et qu'il est entièrement présenté à l'utilisateur. Voici les propriétés CSS correspondantes : 🎜rrreee🎜Dans le code word-wrap: break-word gère tout mot ou caractère unique qui dépasse le texte, en s'assurant que le mot ou le caractère entier apparaît sur la ligne suivante, et ça ne détruit pas. white-space: pre-wrap gérera les espaces et les tirets, garantissant que leur placement ne rompt pas le contenu du texte. De plus, les attributs word-break: break-all et overflow-wrap: break-word garantissent que le texte débordant ne perturbe pas la disposition de la zone de texte. 🎜🎜Résumé🎜🎜Avec les techniques CSS ci-dessus, vous pouvez contrôler et résoudre le problème du débordement de texte, offrant ainsi une expérience utilisateur plus fluide et meilleure pour les sites Web et les applications. Dans vos propres projets, expérimenter ces propriétés CSS offrira certainement à vos utilisateurs une meilleure expérience. 🎜

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!