Рабочее кросс-браузерное решение
Эта проблема преследует нас всех в течение многих лет.
Чтобы помочь во всех случаях, я изложил подход, основанный только на CSS, и подход jQuery на случай, если cssats является проблемой.
Вот единственное CSS- решение, которое я придумала, которое работает при любых обстоятельствах, с небольшими оговорками.
Основы просты: он скрывает переполнение пролета и устанавливает максимальную высоту на основе высоты линии, как это предложил Евгений Ха.
Затем есть псевдокласс после содержащего элемента div, который красиво размещает многоточие.
Предостережения
Это решение всегда помещает многоточие, независимо от того, есть ли в этом необходимость.
Если последняя строка заканчивается конечным предложением, вы получите четыре точки ....
Вам нужно быть довольным обоснованным выравниванием текста.
Многоточие будет справа от текста, которое может выглядеть неряшливо.
Код + Фрагмент
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>
Подход jQuery
На мой взгляд, это лучшее решение, но не каждый может использовать JS. По сути, jQuery проверит любой элемент .text, и если число символов превышает заданное значение max var, оно обрежет все остальные и добавит многоточие.
В этом подходе нет предостережений, однако этот пример кода предназначен только для демонстрации основной идеи - я бы не стал использовать это в производстве, не улучшив его по двум причинам:
1) Он перепишет внутренний html .text elems. нужен ли или нет. 2) Не проверяется, что внутренний html не имеет вложенных элементов - поэтому вы очень полагаетесь на автора, чтобы правильно использовать .text.
Edited
Спасибо за улов @markzzz
Код и фрагмент
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 -->