Solusi Lintas Browser yang berfungsi
Masalah ini telah mengganggu kita semua selama bertahun-tahun.
Untuk membantu dalam semua kasus, saya telah meletakkan pendekatan CSS saja, dan pendekatan jQuery dalam kasus peringatan css adalah masalah.
Inilah satu- satunya solusi CSS yang saya buat yang berfungsi dalam segala keadaan, dengan beberapa peringatan kecil.
Dasar-dasarnya sederhana, menyembunyikan limpahan bentang, dan menetapkan tinggi maks berdasarkan ketinggian garis seperti yang disarankan oleh Eugene Xa.
Lalu ada kelas pseudo setelah div berisi yang menempatkan elipsis dengan baik.
Peringatan
Solusi ini akan selalu menempatkan elipsis, terlepas dari apakah ada kebutuhan untuk itu.
Jika baris terakhir berakhir dengan kalimat akhir, Anda akan berakhir dengan empat titik ....
Anda harus puas dengan perataan teks yang dibenarkan.
Ellipsis akan berada di sebelah kanan teks, yang dapat terlihat ceroboh.
Kode + Cuplikan
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>
Pendekatan jQuery
Menurut saya ini adalah solusi terbaik, tetapi tidak semua orang bisa menggunakan JS. Pada dasarnya, jQuery akan memeriksa elemen .text apa saja, dan jika ada lebih banyak karakter daripada preset max var, itu akan memotong sisanya dan menambahkan ellipsis.
Tidak ada peringatan untuk pendekatan ini, namun contoh kode ini hanya dimaksudkan untuk menunjukkan ide dasar - saya tidak akan menggunakan ini dalam produksi tanpa meningkatkannya karena dua alasan:
1) Ini akan menulis ulang html bagian dalam .text elems. apakah dibutuhkan atau tidak. 2) Tidak ada tes untuk memeriksa bahwa html dalam tidak memiliki elem bersarang - jadi Anda banyak mengandalkan penulis untuk menggunakan .text dengan benar.
Diedit
Terima kasih atas tangkapan @markzzz
Kode & Cuplikan
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 -->