Browserübergreifende Lösung
Dieses Problem plagt uns alle seit Jahren.
Um in allen Fällen zu helfen, habe ich den CSS-only-Ansatz und einen jQuery-Ansatz für den Fall, dass die CSS-Vorbehalte ein Problem darstellen, festgelegt.
Hier ist nur ein CSS Lösung, die unter allen Umständen funktioniert, mit ein paar kleinen Einschränkungen.
Die Grundlagen sind einfach, sie verbergen den Überlauf der Spanne und legen die maximale Höhe basierend auf der von Eugene Xa vorgeschlagenen Linienhöhe fest.
Dann gibt es eine Pseudoklasse nach dem enthaltenen div, die die Auslassungspunkte schön platziert.
Vorsichtsmaßnahmen
Diese Lösung platziert immer die Auslassungspunkte, unabhängig davon, ob dies erforderlich ist.
Wenn die letzte Zeile mit einem Endsatz endet, erhalten Sie vier Punkte ....
Sie müssen mit der Ausrichtung des Textes zufrieden sein.
Die Auslassungspunkte befinden sich rechts neben dem Text, der schlampig aussehen kann.
Code + 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>
jQuery-Ansatz
Meiner Meinung nach ist dies die beste Lösung, aber nicht jeder kann JS verwenden. Grundsätzlich überprüft die jQuery jedes .text-Element. Wenn mehr Zeichen als die voreingestellte maximale Variable vorhanden sind, wird der Rest abgeschnitten und eine Ellipse hinzugefügt.
Es gibt keine Einschränkungen bei diesem Ansatz, aber dieses Codebeispiel soll nur die Grundidee demonstrieren - ich würde dies nicht in der Produktion verwenden, ohne es aus zwei Gründen zu verbessern:
1) Es wird das innere HTML von .text-Elementen neu schreiben. ob benötigt oder nicht. 2) Es wird kein Test durchgeführt, um zu überprüfen, ob das innere HTML keine verschachtelten Elemente enthält. Sie verlassen sich daher sehr darauf, dass der Autor den .text korrekt verwendet.
Bearbeitet
Danke für den Fang @markzzz
Code-Auszug
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 -->