Est-il possible d'utiliser text-overflow:ellipsis sur du texte multiligne ?

Question

J'ai un <p> avec une étiquette spécifique largeur et hauteur .

Je veux utiliser text-overflow:ellipsis pour obtenir ... si le texte de la balise est trop long.

Est-il possible de résoudre ce problème avec du css sur du texte multiligne ?

Answer 1

La recherche sur Google ne révèle rien de prometteur, même de loin, alors je vais dire que ce n'est pas possible.

J'ai trouvé text-overflow: -o-ellipsis-lastline mais il ne fonctionne que dans Opera : http://people.opera.com/dstorey/text/text-overflow.html (miroir : http://jsbin.com/exugux/ )

Il existe également une solution similaire pour WebKit uniquement : http://dropshado.ws/post/1015351370/webkit-line-clamp

Answer 2

Quelqu'un semble avoir émulé cette fonctionnalité en pure CSS. Voici l'article de blog :

http://www.mobify.com/dev/multiline-ellipsis-in-pure-css/

Il donne une méthode étape par étape. Vous pouvez essayez la version finale ici .

Answer 3

Vous pouvez le faire avec css. Cela ne fonctionne que dans les navigateurs webkit mais il y a une solution de repli pour les autres.

utiliser :

display: -webkit-box;
-webkit-line-clamp: $lines-to-show;
-webkit-box-orient: vertical;
height: $font-size*$line-height*$lines-to-show; /* Fallback for non-webkit */

ainsi que :

max-width: $maxwidth;
overflow: hidden;
text-overflow: ellipsis;

Voici le violon : Démonstration

Answer 4

Je publie ce message parce que je pense que ma solution est moins complexe que la solution populaire, qui implique des pseudo-éléments et un comportement flottant. J'ai récemment dû créer une solution qui fonctionnerait dans IE7, et les pseudo-éléments n'étaient donc pas une option possible.

Cette technique fait appel à 4 éléments :

• Un conteneur à niveau de bloc qui détermine la hauteur maximale du contenu.
• Une enveloppe en ligne pour le contenu du texte
• Une ellipse contenue dans le wrapper inline.
• Un élément "fill", également dans le wrapper inline, qui masque l'ellipse lorsque le contenu du texte ne dépasse pas les dimensions du conteneur.

Comme pour les solutions précédentes uniquement en CSS, cette technique exige un arrière-plan de couleur unie ou une image d'arrière-plan à position fixe pour le contenu : l'ellipse doit masquer des parties du texte et le remplissage doit masquer l'ellipse. Vous pouvez créer un effet de dégradé pour que le texte s'efface devant l'ellipse, mais je laisserai ce détail cosmétique à votre discrétion.

Structure HTML

<!-- The block level container. `clamped-2` for 2 lines height -->
<p class="clamped clamped-2">
  <!-- The inline wrapper -->
  <span class="text">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
    nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. 
    Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit
    lobortis nisl ut aliquip ex ea commodo consequat.
    <!-- The ellipsis, which can contain anything you want - 
         (a 'more' link, for example) -->
    <span class="ellipsis">
      &#133;
    </span>
    <!-- The fill, which covers the ellipsis when the text doesn't overflow -->
    <span class="fill"></span>
  </span>
</p>

CSS

body {
  /* We need a solid background or background-position: fixed */
  background: #fff;
  /* You'll need to know the line height to clamp on line breaks */
  line-height: 1.5;
}

.clamped {
  overflow: hidden;
  position: relative;
}

/* Clamp to 2 lines, ie line-height x 2:
   Obviously any number of these classes can be written as needed
 */
.clamped-2 {
  max-height: 3em;
}

/* The ellipsis is always at the bottom right of the container,
   but when the text doesn't reach the bottom right...
 */
.clamped .ellipsis {
  background: #fff;
  bottom: 0;
  position: absolute;
  right: 0;
}

/* ...It's obscured by the fill, which is positioned at the bottom right 
   of the text, and occupies any remaining space.
 */
.clamped .fill {
  background: #fff; 
  height: 100%;
  position: absolute;
  width: 100%;
}

Voici une démonstration de ce système : redimensionnez la largeur de votre navigateur ou modifiez le texte pour le voir passer de l'ellipse à la non-ellipse.

En dehors du facteur d'élégance arbitraire, je pense que cette solution est plus performante que la solution populaire car elle ne repose pas sur les flottants (qui nécessitent beaucoup de repeints) - le positionnement absolu est beaucoup plus simple à calculer puisqu'il n'y a pas d'interdépendances lors du calcul de la mise en page.

Answer 5

J'ai écrit une fonction javascript pour résoudre le problème des ellipses multilignes.

function ellipsizeTextBox(id) {

    var el = document.getElementById(id);
    var keep = el.innerHTML;
    while(el.scrollHeight > el.offsetHeight) {
        el.innerHTML = keep;
        el.innerHTML = el.innerHTML.substring(0, el.innerHTML.length-1);
        keep = el.innerHTML;
        el.innerHTML = el.innerHTML + "...";
    }   
}

J'espère que cela vous aidera !