Solución de trabajo entre navegadores
Este problema nos ha estado afectando a todos por años.
Para ayudar en todos los casos, he presentado el enfoque solo CSS y un enfoque jQuery en caso de que las advertencias css sean un problema.
Aquí hay una solución de CSS que se me ocurrió que funciona en todas las circunstancias, con algunas advertencias menores.
Los conceptos básicos son simples, oculta el desbordamiento del tramo y establece la altura máxima en función de la altura de la línea como lo sugiere Eugene Xa.
Luego hay una pseudo clase después del div que contiene que coloca bien los puntos suspensivos.
Advertencias
Esta solución siempre colocará los puntos suspensivos, independientemente de si es necesario.
Si la última línea termina con una oración final, terminarás con cuatro puntos ...
Deberá estar contento con la alineación de texto justificada.
Los puntos suspensivos estarán a la derecha del texto, que puede verse descuidado.
Código + Fragmento
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>
Enfoque jQuery
En mi opinión, esta es la mejor solución, pero no todos pueden usar JS. Básicamente, jQuery verificará cualquier elemento .text, y si hay más caracteres que el valor máximo predeterminado var, cortará el resto y agregará puntos suspensivos.
No hay advertencias para este enfoque, sin embargo, este ejemplo de código solo pretende demostrar la idea básica: no usaría esto en producción sin mejorarlo por dos razones:
1) Reescribirá el html interno de .text elems. si es necesario o no 2) No hace ninguna prueba para verificar que el html interno no tenga elementos anidados, por lo que confía mucho en el autor para usar el .text correctamente.
Editado
Gracias por la captura @markzzz
Fragmento de código
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 -->