web-dev-qa-db-fra.com

Limiter la longueur du texte à n lignes à l'aide de CSS

Est-il possible de limiter une longueur de texte à "n" lignes à l'aide de CSS (ou de le couper en cas de débordement vertical)?.

text-overflow: Ellipsis; ne fonctionne que pour un texte d'une ligne.

texte original:

Ultrices natoque mus mattis, aliquam, cras à pellentesque
tincidunt elit purus lectus, votre meilleur aliquet, elementum nunc
nunc rhoncus placerat urna! Sit is sed! Ut penatibus turpis
mus tincidunt! Dapibus sed aenean, magna sagittis, lorem velit

sortie souhaitée (2 lignes):

Ultrices natoque mus mattis, aliquam, cras à pellentesque
tincidunt elit purus lectus, vel ut aliquet, elementum ...

csstextoverflowellipsis
434
Peter

Il y a un moyen, mais c'est webkit seulement. Cependant, lorsque vous combinez cela avec line-height: X; et max-height: X*N;, cela fonctionnera également dans d'autres navigateurs, sans ellipses.

.giveMeEllipsis {
   overflow: hidden;
   text-overflow: Ellipsis;
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: N; /* number of lines to show */
   line-height: X;        /* fallback */
   max-height: X*N;       /* fallback */
}

Démo: http://jsfiddle.net/csYjC/1131/

507
Evgeny

Ce que vous pouvez faire est le suivant:

.max-lines {
  display: block; /* or inline-block */
  text-overflow: Ellipsis;
  Word-wrap: break-Word;
  overflow: hidden;
  max-height: 3.6em;
  line-height: 1.8em;
}

où max-height: = line-height: × <number-of-lines> dans em.

89
Erik Aigner

Solution de travail sur plusieurs navigateurs

Ce problème nous tourmente depuis des années ...

Pour aider dans tous les cas, j’ai présenté l’approche CSS uniquement et une approche jQuery au cas où les mises en garde CSS sont un problème.

Voici une solution CSS uniquement que je propose qui fonctionne en toutes circonstances, avec quelques mises en garde mineures.

Les principes de base sont simples, ils masquent le débordement de la plage et définissent la hauteur maximale en fonction de la hauteur de ligne suggérée par Eugene Xa.

Ensuite, il y a une pseudo classe après la div qui contient les Ellipsis.

Mises en garde

Cette solution placera toujours les Ellipsis, peu importe si on en a besoin.

Si la dernière ligne se termine par une phrase de fin, vous obtiendrez quatre points ....

Vous devrez vous contenter d'un alignement justifié du texte.

L'ellipse sera à la droite du texte, ce qui peut paraître négligé.

Code + extrait

jsfiddle

.text {
  position: relative;
  font-size: 14px;
  color: black;
  width: 250px; /* Could be anything you like. */
}

.text-concat {
  position: relative;
  display: inline-block;
  Word-wrap: break-Word;
  overflow: hidden;
  max-height: 3.6em; /* (Number of lines you want visible) * (line-height) */
  line-height: 1.2em;
  text-align:justify;
}

.text.Ellipsis::after {
  content: "...";
  position: absolute;
  right: -12px; 
  bottom: 4px;
}

/* Right and bottom for the psudo class are px based on various factors, font-size etc... Tweak for your own needs. */
<div class="text Ellipsis">
  <span class="text-concat">
Lorem ipsum dolor sit amet, nibh eleifend cu his, porro fugit mandamus no mea. Sit tale facete voluptatum ea, ad sumo altera scripta per, eius ullum feugait id duo. At nominavi pericula persecuti ius, sea at sonet tincidunt, cu posse facilisis eos. Aliquid philosophia contentiones id eos, per cu atqui option disputationi, no vis nobis vidisse. Eu has mentitum conclusionemque, primis deterruisset est in.

Virtute feugait ei vim. Commune honestatis accommodare pri ex. Ut est civibus accusam, pro principes conceptam ei, et duo case veniam. Partiendo concludaturque at duo. Ei eirmod verear consequuntur pri. Esse malis facilisis ex vix, cu hinc suavitate scriptorem pri.
  </span>
</div>

Approche jQuery

À mon avis, c'est la meilleure solution, mais tout le monde ne peut pas utiliser JS. Fondamentalement, jQuery vérifiera n'importe quel élément .text et, s'il y a plus de caractères que la variable prédéfinie, il coupera le reste et ajoutera un Ellipsis.

Il n'y a pas de mise en garde à cette approche, cependant, cet exemple de code est uniquement destiné à illustrer l'idée de base - je ne l'utiliserais pas en production sans l'améliorer pour deux raisons:

1) Il va réécrire le HTML intérieur des elems .text. si nécessaire ou non. 2) Il n’effectue aucun test pour vérifier que le code HTML interne n’a pas d’éléments imbriqués - vous vous fiez donc beaucoup à l’auteur pour utiliser le texte correctement.

Édité

Merci pour la capture @markzzz

Code et extrait

jsfiddle

setTimeout(function()
{
        var max = 200;
  var tot, str;
  $('.text').each(function() {
        str = String($(this).html());
        tot = str.length;
    str = (tot <= max)
        ? str
      : str.substring(0,(max + 1))+"...";
    $(this).html(str);
  });
},500); // Delayed for example only.
.text {
  position: relative;
  font-size: 14px;
  color: black;
  font-family: sans-serif;
  width: 250px; /* Could be anything you like. */
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="text">
Old men tend to forget what thought was like in their youth; they forget the quickness of the mental jump, the daring of the youthful intuition, the agility of the fresh insight. They become accustomed to the more plodding varieties of reason, and because this is more than made up by the accumulation of experience, old men think themselves wiser than the young.
</p>

<p class="text">
Old men tend to forget what thought was like in their youth;
</p>
 <!-- Working Cross-browser Solution

This is a jQuery approach to limiting a body of text to n words, and end with an Ellipsis -->
31
asimovwasright

Autant que je sache, cela ne serait possible qu'en utilisant height: (some em value); overflow: hidden et, même dans ce cas, il n'aurait pas la fantaisie ... à la fin.

Si ce n'est pas une option, je pense que c'est impossible sans un prétraitement côté serveur (difficile car le flux de texte est impossible à prédire de manière fiable) ou jQuery (possible mais probablement compliqué).

30
Pekka 웃

La solution de ce fil consiste à utiliser le plugin jQuery dotdotdot . Ce n'est pas une solution CSS, mais cela vous donne beaucoup d'options pour les liens "en savoir plus", le redimensionnement dynamique, etc.

15
Martin Andersson

la suite de la classe CSS m'a aidé à obtenir deux Ellipsis de ligne.

  .two-line-Ellipsis {
        padding-left:2vw;
        text-overflow: Ellipsis;
        overflow: hidden;
        width: 325px;
        line-height: 25px;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        padding-top: 15px;
    }
9
Mohammad Salman

Actuellement, vous ne pouvez pas, mais à l'avenir, vous pourrez utiliser text-overflow:ellipis-lastline. Actuellement, il est disponible avec le préfixe du fournisseur dans Opera 10.60+: exemple

5
dreamer_

J'ai une solution qui fonctionne bien mais à la place d'un Ellipsis, il utilise un dégradé. Cela fonctionne lorsque vous avez du texte dynamique, vous ne savez donc pas s'il sera suffisamment long pour nécessiter une ellipse. Les avantages sont que vous n'avez pas à faire de calculs JavaScript et que cela fonctionne pour les conteneurs de largeur variable, y compris les cellules de tableau, et pour tous les navigateurs. Il utilise quelques div supplémentaires, mais il est très facile à mettre en œuvre.

Balisage:

<td>
    <div class="fade-container" title="content goes here">
         content goes here
         <div class="fade">
    </div>
</td>

CSS:

.fade-container { /*two lines*/
    overflow: hidden;
    position: relative;
    line-height: 18px; 
    /* height must be a multiple of line-height for how many rows you want to show (height = line-height x rows) */
    height: 36px;
    -ms-hyphens: auto;
    -webkit-hyphens: auto;
    hyphens: auto;
    Word-wrap: break-Word;
}

.fade {
        position: absolute;
        top: 50%;/* only cover the last line. If this wrapped to 3 lines it would be 33% or the height of one line */
        right: 0;
        bottom: 0;
        width: 26px;
        background: linear-gradient(to right,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
}

article de blog: http://salzerdesign.com/blog/?p=45

exemple de page: http://salzerdesign.com/test/fade.html

3
Miriam Salzer

J'aime beaucoup le line-clamp, mais pas encore de support pour firefox .. alors je vais avec un calcul mathématique et cache juste le débordement

.body-content.body-overflow-hidden h5 {
    max-height: 62px;/* font-size * line-height * lines-to-show(4 in this case) 63px if you go with jquery */
    overflow: hidden;
}
.body-content h5 {
    font-size: 14px; /* need to know this*/
    line-height:1,1; /*and this*/
}

maintenant, disons que vous voulez supprimer et ajouter cette classe via jQuery avec un lien, vous aurez besoin d'un pixel supplémentaire pour que la hauteur maximale soit de 63 px, car vous devez vérifier à chaque fois si la hauteur est supérieure à 62px, mais dans le cas de 4 lignes vous obtiendrez un faux vrai, donc un pixel supplémentaire corrigera cela et ne créera pas de problèmes supplémentaires

je vais coller un coffeescript pour que ce soit juste un exemple, utilise quelques liens qui sont cachés par défaut, avec les classes lecture-plus et lecture-moins, cela supprimera ceux dont le débordement n'est pas nécessaire et enlève le corps classes de débordement

jQuery ->

    $('.read-more').each ->
        if $(this).parent().find("h5").height() < 63
             $(this).parent().removeClass("body-overflow-hidden").find(".read-less").remove()
             $(this).remove()
        else
            $(this).show()

    $('.read-more').click (event) ->
        event.preventDefault()
        $(this).parent().removeClass("body-overflow-hidden")
        $(this).hide()
        $(this).parent().find('.read-less').show()

    $('.read-less').click (event) ->
        event.preventDefault()
        $(this).parent().addClass("body-overflow-hidden")
        $(this).hide()
        $(this).parent().find('.read-more').show()
0
Alexis

Si vous voulez vous concentrer sur chaque letter que vous pouvez faire comme ça, je me réfère à this question

function truncate(source, size) {
  return source.length > size ? source.slice(0, size - 1) + "…" : source;
}

var text = truncate('Truncate text to fit in 3 lines', 14);
console.log(text);

Si vous voulez vous concentrer sur chaque Word vous pouvez faire comme ça + espace

const truncate = (title, limit = 14) => {  // 14 IS DEFAULT ARGUMENT 
    const newTitle = [];
    if (title.length > limit) {
        title.split(' ').reduce((acc, cur) => {
            if (acc + cur.length <= limit) {
                newTitle.Push(cur);
            }
            return acc + cur.length;
        }, 0);

        return newTitle.join(' ') + '...'
    }
    return title;
}

var text = truncate('Truncate text to fit in 3 lines', 14);
console.log(text);

Si vous voulez vous concentrer sur chaque Word vous pouvez faire comme ça + sans espace

const truncate = (title, limit = 14) => {  // 14 IS DEFAULT ARGUMENT 
    const newTitle = [];
    if (title.length > limit) {
        Array.prototype.slice.call(title).reduce((acc, cur) => {
            if (acc + cur.length <= limit) {
                newTitle.Push(cur);
            }
            return acc + cur.length;
        }, 0);

        return newTitle.join('') + '...'
    }
    return title;
}

var text = truncate('Truncate text to fit in 3 lines', 14);
console.log(text);
0
Nisharg Shah

Exemple de code de base, apprendre à coder est facile. Vérifiez les commentaires de style CSS.

table tr {
  display: flex;
}
table tr td {
  /* start */
  display: inline-block; /* <- Prevent <tr> in a display css */
  text-overflow: Ellipsis;
  white-space: nowrap;
  /* end */
  padding: 10px;
  width: 150px; /* Space size limit */
  border: 1px solid black;
  overflow: hidden;
}
<table>
  <tbody>
    <tr>
      <td>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla egestas erat ut luctus posuere. Praesent et commodo eros. Vestibulum eu nisl vel dui ultrices ultricies vel in tellus.
      </td>
      <td>
        Praesent vitae tempus nulla. Donec vel porta velit. Fusce mattis enim ex. Mauris eu malesuada ante. Aenean id aliquet leo, nec ultricies tortor. Curabitur non mollis elit. Morbi euismod ante sit amet iaculis pharetra. Mauris id ultricies urna. Cras ut
        nisi dolor. Curabitur tellus erat, condimentum ac enim non, varius tempor nisi. Donec dapibus justo odio, sed consequat eros feugiat feugiat.
      </td>
      <td>
        Pellentesque mattis consequat ipsum sed sagittis. Pellentesque consectetur vestibulum odio, aliquet auctor ex elementum sed. Suspendisse porta massa nisl, quis molestie libero auctor varius. Ut erat nibh, fringilla sed ligula ut, iaculis interdum sapien.
        Ut dictum massa mi, sit amet interdum mi bibendum nec.
      </td>
    </tr>
    <tr>
      <td>
        Sed viverra massa laoreet urna dictum, et fringilla dui molestie. Duis porta, ligula ut venenatis pretium, sapien tellus blandit felis, non lobortis orci erat sed justo. Vivamus hendrerit, quam at iaculis vehicula, nibh nisi fermentum augue, at sagittis
        nibh dui et erat.
      </td>
      <td>
        Nullam mollis nulla justo, nec tincidunt urna suscipit non. Donec malesuada dolor non dolor interdum, id ultrices neque egestas. Integer ac ante sed magna gravida dapibus sit amet eu diam. Etiam dignissim est sit amet libero dapibus, in consequat est
        aliquet.
      </td>
      <td>
        Vestibulum mollis, dui eu eleifend tincidunt, erat eros tempor nibh, non finibus quam ante nec felis. Fusce egestas, orci in volutpat imperdiet, risus velit convallis sapien, sodales lobortis risus lectus id leo. Nunc vel diam vel nunc congue finibus.
        Vestibulum turpis tortor, pharetra sed ipsum eu, tincidunt imperdiet lorem. Donec rutrum purus at tincidunt sagittis. Quisque nec hendrerit justo.
      </td>
    </tr>
  </tbody>
</table>
0
KingRider