Solução de trabalho entre navegadores
Esse problema vem nos atormentando há anos.
Para ajudar em todos os casos, eu expus a abordagem somente CSS, e uma abordagem jQuery, caso as advertências do css sejam um problema.
Aqui está uma solução que eu desenvolvi em CSS, que funciona em todas as circunstâncias, com algumas pequenas advertências.
O básico é simples, oculta o estouro da extensão e define a altura máxima com base na altura da linha, conforme sugerido por Eugene Xa.
Depois, há uma pseudo classe após a div que contém as reticências.
Ressalvas
Essa solução sempre colocará as reticências, independentemente da necessidade.
Se a última linha terminar com uma frase final, você terminará com quatro pontos ....
Você precisará ser feliz com o alinhamento de texto justificado.
As reticências estarão à direita do texto, que pode parecer desleixado.
Código + 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>
Abordagem jQuery
Na minha opinião, esta é a melhor solução, mas nem todos podem usar o JS. Basicamente, o jQuery verificará qualquer elemento .text e, se houver mais caracteres que o max predefinido, ele cortará o restante e adicionará reticências.
Não há advertências para essa abordagem, no entanto, este exemplo de código serve apenas para demonstrar a idéia básica - eu não usaria isso na produção sem aprimorá-la por duas razões:
1) Reescreverá o html interno dos elementos .text. se necessário ou não. 2) Não é necessário verificar se o html interno não possui elementos aninhados - portanto, você depende muito do autor para usar o .text corretamente.
Editado
Obrigado pela 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 -->