Explication détaillée des propriétés de débordement de texte CSS : text-overflow et points de suspension

Explication détaillée des propriétés de débordement de texte CSS : débordement de texte et points de suspension

Dans la conception Web, nous rencontrons souvent des situations où le contenu du texte est trop long et ne peut pas être affiché complètement. À l'heure actuelle, nous pouvons utiliser la propriété de débordement de texte de CSS pour contrôler la façon dont le texte est affiché. Parmi elles, les deux propriétés les plus couramment utilisées sont le débordement de texte et les points de suspension.

propriété text-overflow
la propriété text-overflow est utilisée pour définir la façon dont le texte est affiché lorsque le texte déborde du conteneur. Il a les trois valeurs suivantes :

1. clip : Valeur par défaut, indiquant que le texte débordant sera coupé et que la partie débordante ne sera pas affichée.
2. points de suspension : Le texte indiquant un débordement sera représenté par des points de suspension.
3. string : Indique que le texte débordé sera remplacé par la chaîne spécifiée.

attribut ellipse
ellipsis est l'attribut d'abréviation du débordement de texte. L'utilisation de l'attribut ellipse peut obtenir plus rapidement l'effet d'affichage des points de suspension lorsque le texte déborde. Il n'a qu'une seule valeur : les points de suspension, ce qui signifie que le texte débordant sera représenté par des points de suspension.

Exemple de code :
Voyons comment utiliser le débordement de texte et les points de suspension pour obtenir l'effet d'affichage des points de suspension lorsque le texte déborde.

Code HTML :

<div class="overflow-container">
  <p class="text">这是一段很长的文本，当超出容器时将以省略号方式显示。</p>
</div>

Code CSS :

.overflow-container {
  width: 300px; /* 设置容器的宽度 */
  white-space: nowrap; /* 设置文本不换行 */
}

.text {
  overflow: hidden; /* 隐藏溢出的文本 */
  text-overflow: ellipsis; /* 使用省略号显示溢出的部分 */
}

Dans le code ci-dessus, nous créons un conteneur d'une largeur de 300px et enveloppons le texte dans une balise de paragraphe. En définissant la largeur du conteneur et les propriétés du texte, lorsque le contenu du texte est trop long, la partie débordante sera masquée et affichée sous forme d'ellipses.

Résumé :
Dans la conception Web, contrôler la façon dont le débordement de texte est affiché est une compétence importante. En utilisant les propriétés CSS de débordement de texte et de points de suspension, nous pouvons facilement obtenir l'effet d'affichage des points de suspension. Ces attributs peuvent nous aider à afficher plus de contenu dans un espace limité et à améliorer l'expérience utilisateur.

Remarque : les attributs de débordement de texte et de points de suspension peuvent présenter des problèmes de compatibilité sur certains navigateurs (en particulier les navigateurs mobiles). Lors de l'utilisation de ces attributs, il est recommandé de tester d'abord la compatibilité de chaque navigateur pour garantir le meilleur effet d'affichage.

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!