Comment obtenir l'effet de points de suspension au-delà de la partie en HTML

Omettre les parties excédentaires dans le HTML est une exigence de conception courante. Lorsque le contenu du texte dépasse les limites, nous le tronquons généralement et le remplaçons par des points de suspension. Non seulement cela rend le contenu plus propre, mais cela offre également une meilleure expérience utilisateur. Cet article explique comment utiliser CSS pour obtenir l'effet d'omettre les parties excédentaires du HTML.

propriété text-overflow

Lorsque nous réalisons l'effet de l'omission des parties excédentaires en HTML, nous utilisons généralement la propriété text-overflow de CSS. Sa fonction est de spécifier comment la partie excédentaire doit être gérée lorsque le contenu du texte d'un élément déborde de son conteneur.

Cet attribut a 3 valeurs :

• clip : Valeur par défaut, la partie excédentaire sera recadrée et non affichée. clip：默认值，超出部分将被裁剪掉，不显示。
• ellipsis：超出部分用省略号代替。
• string：超出部分用给定字符串代替。

其中，最常用的是 ellipsis，因为它能够简单快速地实现省略号效果。

white-space 属性

在使用 text-overflow 属性时，我们还需要设置 white-space 属性。该属性指定元素中的空白如何处理。默认值是 normal，表示合并连续的空白字符并将换行符转换为空格。

如果我们要在文本中保留连续的空格字符，就需要将 white-space 属性设置为 pre-wrap。而且，只有在 white-space 属性被设置为 nowrap 和 pre-wrap

ellipses : La partie excédentaire est remplacée par des ellipses.

string : La partie excédentaire est remplacée par la chaîne donnée.

Parmi eux, le plus couramment utilisé est ellipse, car il permet d'obtenir l'effet de points de suspension simplement et rapidement.

attribut white-space

Lorsque nous utilisons l'attribut text-overflow, nous devons également définir l'attribut white-space. Cette propriété spécifie comment les espaces dans l'élément sont gérés. La valeur par défaut est normal, qui fusionne les caractères d'espacement consécutifs et convertit les nouvelles lignes en espaces.

Si nous voulons conserver les caractères d'espacement continu dans le texte, nous devons définir l'attribut white-space sur pre-wrap. De plus, le débordement de texte ne prend effet que lorsque l'attribut d'espace blanc est défini sur nowrap et pre-wrap.
• Utilisez CSS pour obtenir l'effet de points de suspension
• Voici un exemple d'utilisation de CSS pour obtenir l'effet de points de suspension :

• <style>
    .ellipsis {
      width: 200px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  </style>
  
  <div class="ellipsis">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed consequat magna vel leo sollicitudin convallis. Sed vestibulum auctor purus a tristique.
  </div>

Dans l'exemple ci-dessus, nous avons créé un élément de niveau bloc avec une largeur pour contenir le contenu du texte. Ensuite, nous définissons la propriété white-space sur nowrap afin que les espaces consécutifs dans le texte ne soient pas fusionnés. Nous utilisons l'attribut overflow pour masquer la partie overflow et utilisons text-overflow: ellipsis pour la remplacer par des points de suspension.

Utilisation appropriée des effets d'ellipses

Bien que l'utilisation d'effets d'ellipses puisse rendre le contenu plus soigné, nous devons également utiliser les ellipses de manière appropriée pour garantir l'expérience utilisateur. Voici quelques suggestions pour une utilisation appropriée des points de suspension HTML :

#🎜🎜##🎜🎜#Utilisez les points de suspension uniquement lorsque cela est nécessaire. Si vous remplacez tout le texte par des points de suspension, cela confondra les utilisateurs car ils ne sauront pas quel est le texte masqué. #🎜🎜##🎜🎜#Laissez suffisamment d'espace pour les ellipses. En règle générale, nous devons laisser un peu d'espace aux points de suspension afin de garantir que les utilisateurs puissent comprendre correctement la partie tronquée du contenu du texte. #🎜🎜##🎜🎜#Utilisez des points de suspension lorsque vous lisez de longs paragraphes de texte. Les ellipses dans le texte sont souvent utilisées pour permettre aux lecteurs de « sauter rapidement » des informations inutiles, telles que de longs paragraphes de commentaires ou des articles plus longs que la largeur de l'écran. Dans ce cas, les points de suspension offrent une meilleure expérience utilisateur car elles permettent aux lecteurs de comprendre plus facilement le résumé du texte. #🎜🎜##🎜🎜##🎜🎜#Summary#🎜🎜##🎜🎜#Dans cet article, nous avons présenté comment utiliser CSS pour obtenir l'effet d'omettre les parties excédentaires en HTML. Nous utilisons principalement les propriétés de débordement de texte et d'espace blanc pour atteindre cet objectif. Enfin, nous donnons également quelques suggestions pour une utilisation appropriée des ellipses afin de vous aider à optimiser l'expérience utilisateur. #🎜🎜#

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!