Działające rozwiązanie dla różnych przeglądarek
Ten problem trapi nas wszystkich od lat.
Aby pomóc we wszystkich przypadkach, opracowałem podejście CSS i podejście jQuery na wypadek problemów z css.
Oto rozwiązanie CSS , które wymyśliłem, które działa w każdych okolicznościach, z kilkoma drobnymi zastrzeżeniami.
Podstawy są proste, ukrywa przepełnienie rozpiętości i ustawia maksymalną wysokość na podstawie wysokości linii, jak zasugerował Eugene Xa.
Potem jest pseudoklasa po div zawierającym, który ładnie umieszcza elipsę.
Ostrzeżenia
To rozwiązanie zawsze umieszcza wielokropek, niezależnie od tego, czy jest to potrzebne.
Jeśli ostatni wiersz kończy się końcowym zdaniem, skończysz z czterema kropkami ....
Musisz być zadowolony z uzasadnionego wyrównania tekstu.
Elipsa będzie po prawej stronie tekstu, który może wyglądać niechlujnie.
Kod + 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>
Podejście jQuery
Moim zdaniem jest to najlepsze rozwiązanie, ale nie każdy może korzystać z JS. Zasadniczo jQuery sprawdzi dowolny element .text, a jeśli będzie więcej znaków niż wstępnie ustawiony max var, odetnie resztę i doda elipsę.
Nie ma żadnych zastrzeżeń do tego podejścia, jednak ten przykład kodu ma jedynie na celu zademonstrowanie podstawowej idei - nie użyłbym tego w produkcji bez ulepszenia go z dwóch powodów:
1) Przepisze wewnętrzny html elementów .text. czy to potrzebne czy nie. 2) Nie sprawdza się, czy wewnętrzny html nie ma zagnieżdżonych elementów - więc w dużym stopniu polegasz na autorze, aby poprawnie używał .text.
Edytowane
Dzięki za złapanie @markzzz
Kod i fragment
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 -->