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

Question

Est-il possible de limiter la longueur d'un texte à "n" lignes à l'aide de CSS (ou de le couper lorsqu'il déborde verticalement).

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

texte original :

Ultrices natoque mus mattis, aliquam, cras in pellentesque
tincidunt elit purus lectus, vel ut aliquet, elementum nunc
nunc rhoncus placerat urna ! Sit est sed ! Ut penatibus turpis
mus tincidunt ! Dapibus sed aenean, magna sagittis, lorem velit.

sortie souhaitée (2 lignes) :

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

Answer 1

Il y a un moyen de le faire en utilisant des méthodes non officielles. collier de serrage et, à partir de Firefox 68, elle fonctionne dans tous les principaux navigateurs.

body {
   margin: 20px;
}

.text {
   overflow: hidden;
   text-overflow: ellipsis;
   display: -webkit-box;
   -webkit-line-clamp: 2; /* number of lines to show */
   -webkit-box-orient: vertical;
}

<div class="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam consectetur venenatis blandit. Praesent vehicula, libero non pretium vulputate, lacus arcu facilisis lectus, sed feugiat tellus nulla eu dolor. Nulla porta bibendum lectus quis euismod. Aliquam volutpat ultricies porttitor. Cras risus nisi, accumsan vel cursus ut, sollicitudin vitae dolor. Fusce scelerisque eleifend lectus in bibendum. Suspendisse lacinia egestas felis a volutpat.
</div>

A moins que vous ne vous préoccupiez des utilisateurs d'IE, il n'est pas nécessaire de faire line-height et max-height de repli.

Answer 2

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;
}

<p class="max-lines">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vitae leo dapibus, accumsan lorem eleifend, pharetra quam. Quisque vestibulum commodo justo, eleifend mollis enim blandit eu. Aenean hendrerit nisl et elit maximus finibus. Suspendisse scelerisque consectetur nisl mollis scelerisque.</p>

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

Answer 3

Pour autant que je puisse voir, cela ne serait possible qu'en utilisant height: (some em value); overflow: hidden et même alors, 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évoir de manière fiable) ou jQuery (possible mais probablement compliqué).

Answer 4

La solution de ce fil est d'utiliser le plugin jquery pointdotdot . Il ne s'agit pas d'une solution CSS, mais elle vous offre de nombreuses options pour les liens "en savoir plus", le redimensionnement dynamique, etc.

Answer 5

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