web-dev-qa-db-fra.com

Est-il possible d'utiliser un dépassement de texte: Ellipsis sur du texte multiligne?

J'ai un tag p- avec un width et un height spécifiques. Je souhaite utiliser text-overflow:Ellipsis pour obtenir ... si le texte de la balise est trop long. Est-ce possible de résoudre avec CSS sur un texte multiligne?

htmlcsscss3
57
Johan

Googler ne révèle rien de prometteur, 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 exclusivement WebKit: http://dropshado.ws/post/1015351370/webkit-line-clamp

37
thirtydot

Vous pouvez le faire avec css. Cela ne fonctionne que dans les navigateurs Webkit, mais a un repli sur les autres.

utilisation :

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 */

de même que:

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

Voici le violon: demo

15
Harish Anchu

Je poste ceci 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 eu à créer une solution qui fonctionnerait dans IE7. Les pseudo-éléments n'étaient donc pas une option.

La technique comporte 4 éléments:

  • Un conteneur de niveau bloc qui détermine la hauteur maximale du contenu
  • Un wrapper en ligne pour le contenu du texte
  • Un ellipsis contenu dans l'emballage intégré
  • Un élément 'de remplissage', également à l'intérieur du wrapper en ligne, qui ferme les ellipses lorsque le contenu du texte ne dépasse pas les dimensions du conteneur

Comme avec les solutions précédentes exclusivement CSS, la technique exige un fond coloré ou une image d'arrière-plan à position fixe pour le contenu: l'Ellipsis doit masquer des parties du texte et le remplissage doit masquer l'Ellipsis. Vous pouvez créer un effet de dégradé sophistiqué pour que le texte se fonde dans l’Ellipsis, mais je laisserai ce détail esthétique à la 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 un violon qui en fait la démonstration : redimensionne la largeur de votre navigateur ou changez le texte pour le voir passer de Ellipsis à non-Ellipsis.

Outre le facteur d’élégance arbitraire, je pense que cette solution est plus performante que la solution classique car elle ne repose pas sur des flottants (qui nécessitent beaucoup de repeintes) - le positionnement absolu est beaucoup plus simple à calculer car il n’ya pas d’interdépendance dans le calcul disposition.

11
Barney

J'ai écrit une fonction javascript pour résoudre le problème des Ellipsis 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 t'aides!

5
user1152475

Modification de la fonction par user1152475 afin que cela fonctionne Word par Word (délimité par des espaces) plutôt que caractère par caractère.

function ellipsizeTextBox(id) {
    var el = document.getElementById(id);
    var wordArray = el.innerHTML.split(' ');
    while(el.scrollHeight > el.offsetHeight) {
        wordArray.pop();
        el.innerHTML = wordArray.join(' ')  + '...';
    }   
}

Notez que pour les deux solutions, la boîte doit avoir une hauteur définie.

3
LocalPCGuy

J'ai trouvé une solution pour les Ellipsis CSS pures multi-navigateurs et multilignes. J'ai essayé beaucoup de solutions et seule celle-ci ne fonctionnait qu'avec CSS. J'avais une div avec une largeur dynamique et je devais régler la hauteur. 

Voici le lien: http://hackingui.com/front-end/a-pure-css-solution-for-multiline-text-truncation/

2
Wladimir Gramacho

HTML n'offre aucune fonctionnalité de ce type, ce qui est très frustrant.

C'est pourquoi j'ai développé une petite bibliothèque pour traiter ce problème. La bibliothèque fournit des objets pour modéliser et effectuer un rendu de texte au niveau lettre. Cela devrait faire exactement ce dont vous avez besoin:

Lisez la suite sur http://www.samuelrossille.com/home/jstext pour une capture d'écran, un tutoriel et un lien de téléchargement.

1
Samuel Rossille

J'ai bricolé la plupart de ces solutions et votre meilleur choix est d'utiliser le plugin solid clamp.js . Il fonctionne dans tous les environnements et a une empreinte minuscule minifiée (3K).

0
staypuftman

Comme indiqué précédemment, il existe un moyen étrange de réaliser cela avec une boîte à Webkit postée par David DeSandro:

  elements_to_style {
      display: -webkit-box;
      overflow : hidden;
      text-overflow: Ellipsis
      -webkit-line-clamp: number_of_lines_you_want;
      -webkit-box-orient: vertical;
  }

link http://dropshado.ws/post/1015351370/webkit-line-clamp

0
Tamo Maes
.minHeightg{
height:5.6rem !important;
  width:20%;
}
.productOverflow
{
     overflow: hidden;
   text-overflow: Ellipsis;
   display: -webkit-box;
   line-height: 16px;     /* fallback */
   max-height: 3.6rem;      /* fallback */
   -webkit-line-clamp: 3; /* number of lines to show */
   -webkit-box-orient: vertical;
}



/*firefox*/
@-moz-document url-prefix() {
   
   .productOverflow
{
   overflow: hidden;
   text-overflow:Ellipsis;
   display: -moz-box !important;
   
   line-height: 16px;     /* fallback */
   max-height: 3.6rem;      /* fallback */
   -moz-line-clamp: 3; /* number of lines to show */
   -moz-box-orient: vertical;
}
<div class="minHeightg">
    <p class="productOverflow">Some quick example text to build on the card title .</p>
    </div>
0
Baleshwar Dabbikar

juste au cas où quelqu'un arriverait ici, est-ce que ceci est une solution pour vous? css pur cross-browser . http://codepen.io/issactomatotan/pen/LkJbjO

<div style="position:relative;width:100%;max-height:40px;overflow:hidden;font-size:16px;line-height:20px;border:1px solid red;">
<p class="pp">asd asdasd asd asd asdasd a asdasd a sdasd asdasd asdaasd asd asd d asasas das dasdd asddasd asdasd asdsdasd asd<span class="bb"></span></p>

0
user3769916