Робота з крос-браузерним рішенням
Ця проблема мучила нас усіх роками.
Щоб допомогти у всіх випадках, я виклав підхід лише CSS та підхід jQuery у випадку, якщо застереження css є проблемою.
Ось єдине рішення CSS, яке я придумав, який працює за будь-яких обставин, з кількома незначними застереженнями.
Основи прості, він приховує переповнення прольоту і встановлює максимальну висоту на основі висоти лінії, як запропонував Євген Xa.
Потім є псевдоклас після вмістуючого діва, який добре розміщує еліпсис.
Коваджі
Це рішення завжди буде розміщувати еліпсис, незалежно від того, чи є в ньому потреба.
Якщо останній рядок закінчується закінченням речення, ви закінчите чотирма крапками….
Вам потрібно буде задовольнити виправдане вирівнювання тексту.
Еліпсис буде праворуч від тексту, який може виглядати неохайно.
Код + фрагмент
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 перевірить будь-який.
Немає застережень щодо цього підходу, однак цей приклад коду призначений лише для демонстрації основної ідеї - я б не використовував це у виробництві, не вдосконалюючи його з двох причин:
1) Він перепише внутрішній html .text elems. потрібен чи ні. 2) Це не тест, щоб перевірити, що внутрішній html не має вкладених елем, тому ви багато покладаєтесь на автора, щоб правильно використовувати .text.
Відредаговано
Дякуємо за улов @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 -->