Solution multi-navigateur fonctionnelle
Ce problème nous tourmente tous depuis des années.
Pour vous 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 poseraient problème.
Voici une seule solution CSS que j'ai trouvée qui fonctionne en toutes circonstances, avec quelques mises en garde mineures.
Les bases sont simples, elles masquent le débordement de la travée et définissent la hauteur maximale en fonction de la hauteur de ligne comme suggéré par Eugene Xa.
Ensuite, il y a une pseudo-classe après le div contenant qui place bien les points de suspension.
Avertissements
Cette solution placera toujours les points de suspension, indépendamment de la nécessité.
Si la dernière ligne se termine par une phrase de fin, vous vous retrouverez avec quatre points ....
Vous devrez être satisfait de l'alignement du texte justifié.
Les points de suspension seront à droite du texte, ce qui peut sembler bâclé.
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, le jQuery vérifiera n'importe quel élément .text, et s'il y a plus de caractères que la var max prédéfinie, il coupera le reste et ajoutera des points de suspension.
Il n'y a aucune mise en garde à cette approche, mais cet exemple de code est uniquement destiné à démontrer l'idée de base - je ne l'utiliserais pas en production sans l'améliorer pour deux raisons:
1) Il réécrira le html interne des elems .text. si nécessaire ou non. 2) Il ne fait aucun test pour vérifier que le html interne n'a pas d'elems imbriqués - vous comptez donc beaucoup sur l'auteur pour utiliser correctement le .text.
Édité
Merci pour la capture @markzzz
Extrait de code
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 -->