Le débordement de texte multiligne affiche des ellipses (...)

Tout le monde doit savoir que l'attribut <a href="http://www.php.cn/wiki/868.html" target="_blank">text-</a><a href="http://www.php.cn/wiki/923.html" target="_blank">overflow</a>:ellipsis est utilisé pour réaliser l'affichage par débordement des points de suspension (…) dans une seule ligne de texte. Bien entendu, certains navigateurs doivent également ajouter l'attribut width <a href="http://www.php.cn/wiki/835.html" target="_blank">width<code><a href="http://www.php.cn/wiki/835.html" target="_blank">width</a> .

css Code :

1. overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;

Mais cet attribut ne prend pas en charge plusieurs lignes Le débordement de texte affiche des ellipses. Nous introduisons ici plusieurs méthodes pour obtenir cet effet basées sur le scénario d'application .

Navigateur WebKit ou page mobile

L'implémentation de la page dans le navigateur WebKit ou le terminal mobile (la plupart des navigateurs avec le noyau WebKit) est relativement simple et vous pouvez directement utiliser la propriété d'extension CSS de WebKit (WebKit est un private property) -webkit-line-clamp ; Remarque : Il s'agit d'une propriété WebKit non prise en charge, qui n'apparaît pas dans le projet de spécification CSS.

-webkit-line-clamp permet de limiter le nombre de lignes de texte affichées dans un élément de bloc. Afin d'obtenir cet effet, il doit être combiné avec d'autres propriétés WebKit.
Attributs de combinaison courants :

1. <a href="http://www.php.cn/wiki/927.html" target="_blank">affichage <code><a href="http://www.php.cn/wiki/927.html" target="_blank">display</a>: -webkit-box;: -webkit-box; Attributs qui doivent être combinés pour afficher l'objet sous la forme d'un modèle de boîte élastiquement évolutif.

2. -webkit-box-orient Attributs qui doivent être combinés pour définir ou récupérer la disposition des éléments enfants de l'objet flex box.

3. text-overflow: ellipsis; peut être utilisé pour masquer le texte hors plage avec les points de suspension "..." dans le cas d'un texte multiligne.

css Code :

1. overflow : hidden;
   text-overflow: ellipsis;
   display: -webkit-box;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;

Cet attribut Il est plus adapté aux navigateurs WebKit ou aux navigateurs mobiles (dont la plupart sont basés sur WebKit).

Pour des exemples spécifiques, veuillez consulter http://www.php.cn/

Solution compatible avec plusieurs navigateurs

Une méthode plus fiable et plus simple consiste à configurer un Hauteur du conteneur relativement positionné, simulé avec des éléments contenant des ellipses (…) ;

Par exemple :

css Code :

1. p {
       position:relative;
       line-height:1.4em;
       /* 3 times the line-height to show 3 lines */
       height:4.2em;
       overflow:hidden;
   }
   p::after {
       content:"...";
       font-weight:bold;
       position:absolute;
       bottom:0;
       right:0;
       padding:0 20px 1px 45px;
       background:url(http://www.php.cn/) repeat-y;
   }

Quelques points à noter ici :

1. La hauteur est vraiment bonne, 3 fois celle de line-height;

2. Il est plus facile d'omettre la fin et d'utiliser un png translucide pour créer un effet d'esquive, ou de définir la couleur d'arrière-plan ;

3. IE6-7 n'affiche pascontent le contenu, donc pour être compatible avec IE6-7, vous pouvez ajouter une balise au contenu, par exemple en utilisant 5ba58fdc612f1fc136f6b4bee7e3f862...54bdf357c58b8a65c66d7c19c8e4d114 pour simuler

4. Pour prendre en charge IE8, vous devez remplacer

   par ::after ; Simple, je recommande plusieurs petits :afteroutils

   matures qui font un travail similaire :

1.

Adresse de téléchargement et de documentation : http://www.php.cn /C'est aussi très simple à utiliser :

js Code :

2.jQueryplug-in-jQuery.dotdotdot

Ceci est également très pratique à utiliser :

1. var module = document.getElementById("clamp-this-module");
   $clamp(module, {clamp: 3});

   js
Code :

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!