Maison >interface Web >tutoriel CSS >Comment puis-je créer des points de suspension multilignes en CSS ?

Comment puis-je créer des points de suspension multilignes en CSS ?

Linda Hamilton
Linda Hamiltonoriginal
2024-12-18 06:42:19777parcourir

How Can I Create Multi-Line Ellipsis in CSS?

Utilisation de CSS pour les points de suspension multilignes dans les blocs débordés

Les propriétés CSS données débordent : cachées ; débordement de texte : points de suspension ; espace blanc : nowrap ; sont couramment utilisés pour tronquer du texte dans un conteneur sur une seule ligne. Cependant, que se passe-t-il si vous devez appliquer les points de suspension à plusieurs lignes de texte débordant ?

Résultat souhaité :

Le but est d'obtenir un conteneur de texte multiligne avec points de suspension (...). Par exemple, considérons l'exemple suivant :

+--------------------+
|abcde feg hij   dkjd|
|dsji jdia js ajid  s|
|jdis ajid dheu d ...| /* Here it's overflowed, so "..." is shown. */
+--------------------+

Limites actuelles :

Malheureusement, les propriétés CSS mentionnées ci-dessus ne s'appliquent qu'aux éléments d'une seule ligne. Pour obtenir la fonctionnalité multiligne souhaitée, des solutions externes sont nécessaires.

Plugins jQuery pour les points de suspension multilignes

Plusieurs plugins jQuery sont disponibles pour gérer spécifiquement cela numéro :

  • http://pvdspek.github.com/jquery.autoellipsis/
  • http://dotdotdot.frebsite.nl/
  • http://keith-wood.name/more.html
  • http://github.com/tbasse/jquery-truncate

Ces Les plugins offrent diverses options pour personnaliser le comportement des points de suspension, tels que les effets de saut de ligne et de fondu.

Considérations relatives aux performances :

Il est important de noter que les performances peuvent varier entre celles-ci. plugins. Pour déterminer la solution la plus adaptée, tenez compte de facteurs tels que le nombre de lignes, les performances de votre navigateur et les effets souhaités.

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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn