Soluzione cross-browser funzionante
Questo problema ci affligge da anni.
Per aiutare in tutti i casi, ho presentato l'approccio CSS only e un approccio jQuery nel caso in cui le avvertenze CSS siano un problema.
Ecco una sola soluzione CSS che mi è venuta in mente che funziona in tutte le circostanze, con alcune avvertenze minori.
Le basi sono semplici, nasconde il trabocco della campata e imposta l'altezza massima in base all'altezza della linea come suggerito da Eugene Xa.
Quindi c'è una pseudo classe dopo il div contenente che posiziona bene i puntini di sospensione.
Avvertenze
Questa soluzione posizionerà sempre i puntini di sospensione, indipendentemente se ce n'è bisogno.
Se l'ultima riga termina con una frase finale, finirai con quattro punti ....
Dovrai essere soddisfatto dell'allineamento del testo giustificato.
I puntini di sospensione saranno alla destra del testo, che può apparire sciatto.
Codice + Snippet
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>
Approccio jQuery
Secondo me questa è la soluzione migliore, ma non tutti possono usare JS. Fondamentalmente, jQuery controllerà qualsiasi elemento .text, e se ci sono più caratteri rispetto al massimo var preimpostato, taglierà il resto e aggiungerà un puntino di sospensione.
Non ci sono avvertenze su questo approccio, tuttavia questo esempio di codice ha lo scopo solo di dimostrare l'idea di base - non la userei in produzione senza migliorarla per due motivi:
1) Riscriverà l'html interno di .text elems. se necessario o no. 2) Non fa alcun test per verificare che l'html interno non abbia elem nidificati, quindi ti affidi molto all'autore per usare correttamente .text.
Modificato
Grazie per la cattura @markzzz
Codice e frammento
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 -->