Çalışma Çapraz Tarayıcı Çözümü
Bu sorun hepimizi yıllardır rahatsız ediyor.
Her durumda yardımcı olmak için, sadece CSS yaklaşımını ve css uyarılarının bir sorun olması durumunda bir jQuery yaklaşımı ortaya koydum.
İşte , her koşulda çalışan birkaç CSS çözümü ile sadece CSS çözümü.
Temel bilgiler basittir, açıklığın taşmasını gizler ve Eugene Xa tarafından önerildiği gibi maksimum yüksekliği satır yüksekliğine göre ayarlar.
Sonra elippsi güzel yerleştiren içeren div sonra sözde bir sınıf var.
Uyarılar
Bu çözüm, ihtiyaç olup olmadığına bakılmaksızın her zaman üç noktaya yerleştirilecektir.
Son satır biten bir cümle ile biterse, dört nokta ile sona erecek ....
Doğrulanmış metin hizalamasından memnun olmanız gerekir.
Üç nokta metnin sağında, özensiz görünebilir.
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>
jQuery Yaklaşımı
Bence bu en iyi çözüm, ancak herkes JS'yi kullanamıyor. Temel olarak, jQuery herhangi bir .text öğesini kontrol eder ve önceden ayarlanmış maks. Var değerinden daha fazla karakter varsa, geri kalanını keser ve bir üç nokta ekler.
Bu yaklaşım için uyarı yoktur, ancak bu kod örneği sadece temel fikri göstermek içindir - Bunu iki nedenden dolayı gelişmeden üretimde kullanmam:
1) .text elemlerinin iç html'sini yeniden yazacaktır. gerekli olsun ya da olmasın. 2) İç html'de iç içe elem olup olmadığını kontrol etmek için test yapmaz - bu nedenle .text'i doğru kullanmak için yazara çok güveniyorsunuz.
Düzenlenen
@Markzzz için teşekkürler
Kod ve Snippet
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 -->