Batasi panjang teks hingga n baris menggunakan CSS

Apakah mungkin membatasi panjang teks menjadi garis "n" menggunakan CSS (atau memotongnya ketika meluap secara vertikal).

text-overflow: ellipsis; hanya berfungsi untuk 1 baris teks.

teks asli:

Ultrice natoque mus mattis, aliquam, cras in pellentesque
tincidunt elit purus lectus, atau aliquet, elementum nunc
nunc rhoncus placerat urna! Silakan duduk! Ut penatibus turpis
mus tincidunt! Dapibus sed aenean, magna sagittis, lorem velit

output yang diinginkan (2 baris):

Ultriato natoque mus mattis, aliquam, cras in pellentesque
tincidunt elit purus lectus, veli aliquet, elementum ...

Ada cara untuk melakukannya menggunakan sintaks baris-penjepit tidak resmi , dan mulai dengan Firefox 68 itu bekerja di semua browser utama.

body {
   margin: 20px;
}

.text {
   overflow: hidden;
   text-overflow: ellipsis;
   display: -webkit-box;
   -webkit-line-clamp: 2; /* number of lines to show */
   -webkit-box-orient: vertical;
}

<div class="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam consectetur venenatis blandit. Praesent vehicula, libero non pretium vulputate, lacus arcu facilisis lectus, sed feugiat tellus nulla eu dolor. Nulla porta bibendum lectus quis euismod. Aliquam volutpat ultricies porttitor. Cras risus nisi, accumsan vel cursus ut, sollicitudin vitae dolor. Fusce scelerisque eleifend lectus in bibendum. Suspendisse lacinia egestas felis a volutpat.
</div>

Kecuali Anda peduli dengan pengguna IE, tidak perlu dilakukan line-heightdan max-heightmundur.

Yang dapat Anda lakukan adalah sebagai berikut:

.max-lines {
  display: block;/* or inline-block */
  text-overflow: ellipsis;
  word-wrap: break-word;
  overflow: hidden;
  max-height: 3.6em;
  line-height: 1.8em;
}

<p class="max-lines">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vitae leo dapibus, accumsan lorem eleifend, pharetra quam. Quisque vestibulum commodo justo, eleifend mollis enim blandit eu. Aenean hendrerit nisl et elit maximus finibus. Suspendisse scelerisque consectetur nisl mollis scelerisque.</p>

dimana max-height:= line-height:× <number-of-lines>in em.

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 -->

Sejauh yang saya bisa lihat, ini hanya mungkin menggunakan height: (some em value); overflow: hiddendan bahkan kemudian itu tidak akan memiliki mewah ...pada akhirnya.

Jika itu bukan pilihan, saya pikir itu tidak mungkin tanpa pra-pemrosesan sisi server (sulit karena aliran teks tidak dapat diprediksi dengan andal) atau jQuery (mungkin tetapi mungkin rumit).

Solusi dari utas ini adalah dengan menggunakan dotdotdot plugin jquery . Bukan solusi CSS, tetapi memberi Anda banyak pilihan untuk tautan "baca lebih lanjut", mengubah ukuran dinamis dll.

mengikuti kelas CSS membantu saya mendapatkan ellipsis dua baris.

  .two-line-ellipsis {
        padding-left:2vw;
        text-overflow: ellipsis;
        overflow: hidden;
        width: 325px;
        line-height: 25px;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        padding-top: 15px;
    }

Saat ini Anda tidak bisa, tetapi di masa depan Anda akan dapat menggunakannya text-overflow:ellipis-lastline. Saat ini tersedia dengan awalan vendor di Opera 10.60+: contoh

Saya punya solusi yang berfungsi dengan baik tetapi elipsis ia menggunakan gradien. Ini berfungsi ketika Anda memiliki teks dinamis sehingga Anda tidak tahu apakah itu akan cukup lama untuk membutuhkan elips. Keuntungannya adalah Anda tidak perlu melakukan perhitungan JavaScript apa pun dan berfungsi untuk wadah lebar variabel termasuk sel tabel dan cross-browser. Ini menggunakan beberapa div tambahan, tetapi sangat mudah diimplementasikan.

Markup:

<td>
    <div class="fade-container" title="content goes here">
         content goes here
         <div class="fade">
    </div>
</td>

CSS:

.fade-container { /*two lines*/
    overflow: hidden;
    position: relative;
    line-height: 18px; 
    /* height must be a multiple of line-height for how many rows you want to show (height = line-height x rows) */
    height: 36px;
    -ms-hyphens: auto;
    -webkit-hyphens: auto;
    hyphens: auto;
    word-wrap: break-word;
}

.fade {
        position: absolute;
        top: 50%;/* only cover the last line. If this wrapped to 3 lines it would be 33% or the height of one line */
        right: 0;
        bottom: 0;
        width: 26px;
        background: linear-gradient(to right,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
}

posting blog: http://salzerdesign.com/blog/?p=453

halaman contoh: http://salzerdesign.com/test/fade.html

.class{
   word-break: break-word;
   overflow: hidden;
   text-overflow: ellipsis;
   display: -webkit-box;
   line-height: 16px; /* fallback */
   max-height: 32px; /* fallback */
   -webkit-line-clamp: 2; /* number of lines to show */
   -webkit-box-orient: vertical;
}

Saya sangat suka garis-penjepit, tetapi belum ada dukungan untuk firefox .. jadi saya pergi dengan kalkulasi matematika dan hanya menyembunyikan overflow

.body-content.body-overflow-hidden h5 {
    max-height: 62px;/* font-size * line-height * lines-to-show(4 in this case) 63px if you go with jquery */
    overflow: hidden;
}
.body-content h5 {
    font-size: 14px; /* need to know this*/
    line-height:1,1; /*and this*/
}

sekarang katakanlah Anda ingin menghapus dan menambahkan kelas ini melalui jQuery dengan tautan, Anda harus memiliki piksel tambahan sehingga ketinggian maksimumnya adalah 63 px, ini karena Anda perlu memeriksa setiap kali jika ketinggiannya lebih besar dari 62px, tetapi dalam kasus 4 baris Anda akan mendapatkan false true, sehingga piksel tambahan akan memperbaikinya dan tidak akan membuat masalah tambahan

saya akan menempelkan skrip kopi untuk ini hanya sebagai contoh, menggunakan beberapa tautan yang disembunyikan secara default, dengan kelas baca-lebih dan baca-kurang, itu akan menghapus yang limpahan tidak membutuhkannya dan menghapus tubuh Kelas -overflow

jQuery ->

    $('.read-more').each ->
        if $(this).parent().find("h5").height() < 63
             $(this).parent().removeClass("body-overflow-hidden").find(".read-less").remove()
             $(this).remove()
        else
            $(this).show()

    $('.read-more').click (event) ->
        event.preventDefault()
        $(this).parent().removeClass("body-overflow-hidden")
        $(this).hide()
        $(this).parent().find('.read-less').show()

    $('.read-less').click (event) ->
        event.preventDefault()
        $(this).parent().addClass("body-overflow-hidden")
        $(this).hide()
        $(this).parent().find('.read-more').show()

Jika Anda ingin fokus pada setiap hal letteryang dapat Anda lakukan seperti itu, saya merujuk pertanyaan ini

function truncate(source, size) {
  return source.length > size ? source.slice(0, size - 1) + "…" : source;
}

var text = truncate('Truncate text to fit in 3 lines', 14);
console.log(text);

Jika Anda ingin fokus pada masing-masing wordAnda dapat melakukan seperti itu + ruang

const truncate = (title, limit = 14) => {  // 14 IS DEFAULT ARGUMENT 
    const newTitle = [];
    if (title.length > limit) {
        title.split(' ').reduce((acc, cur) => {
            if (acc + cur.length <= limit) {
                newTitle.push(cur);
            }
            return acc + cur.length;
        }, 0);

        return newTitle.join(' ') + '...'
    }
    return title;
}

var text = truncate('Truncate text to fit in 3 lines', 14);
console.log(text);

Jika Anda ingin fokus pada setiap + wordAnda dapat melakukan seperti itu + tanpa ruang

const truncate = (title, limit = 14) => {  // 14 IS DEFAULT ARGUMENT 
    const newTitle = [];
    if (title.length > limit) {
        Array.prototype.slice.call(title).reduce((acc, cur) => {
            if (acc + cur.length <= limit) {
                newTitle.push(cur);
            }
            return acc + cur.length;
        }, 0);

        return newTitle.join('') + '...'
    }
    return title;
}

var text = truncate('Truncate text to fit in 3 lines', 14);
console.log(text);

Contoh Kode Dasar, belajar kode mudah. Periksa komentar Style CSS.

table tr {
  display: flex;
}
table tr td {
  /* start */
  display: inline-block; /* <- Prevent <tr> in a display css */
  text-overflow: ellipsis;
  white-space: nowrap;
  /* end */
  padding: 10px;
  width: 150px; /* Space size limit */
  border: 1px solid black;
  overflow: hidden;
}

<table>
  <tbody>
    <tr>
      <td>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla egestas erat ut luctus posuere. Praesent et commodo eros. Vestibulum eu nisl vel dui ultrices ultricies vel in tellus.
      </td>
      <td>
        Praesent vitae tempus nulla. Donec vel porta velit. Fusce mattis enim ex. Mauris eu malesuada ante. Aenean id aliquet leo, nec ultricies tortor. Curabitur non mollis elit. Morbi euismod ante sit amet iaculis pharetra. Mauris id ultricies urna. Cras ut
        nisi dolor. Curabitur tellus erat, condimentum ac enim non, varius tempor nisi. Donec dapibus justo odio, sed consequat eros feugiat feugiat.
      </td>
      <td>
        Pellentesque mattis consequat ipsum sed sagittis. Pellentesque consectetur vestibulum odio, aliquet auctor ex elementum sed. Suspendisse porta massa nisl, quis molestie libero auctor varius. Ut erat nibh, fringilla sed ligula ut, iaculis interdum sapien.
        Ut dictum massa mi, sit amet interdum mi bibendum nec.
      </td>
    </tr>
    <tr>
      <td>
        Sed viverra massa laoreet urna dictum, et fringilla dui molestie. Duis porta, ligula ut venenatis pretium, sapien tellus blandit felis, non lobortis orci erat sed justo. Vivamus hendrerit, quam at iaculis vehicula, nibh nisi fermentum augue, at sagittis
        nibh dui et erat.
      </td>
      <td>
        Nullam mollis nulla justo, nec tincidunt urna suscipit non. Donec malesuada dolor non dolor interdum, id ultrices neque egestas. Integer ac ante sed magna gravida dapibus sit amet eu diam. Etiam dignissim est sit amet libero dapibus, in consequat est
        aliquet.
      </td>
      <td>
        Vestibulum mollis, dui eu eleifend tincidunt, erat eros tempor nibh, non finibus quam ante nec felis. Fusce egestas, orci in volutpat imperdiet, risus velit convallis sapien, sodales lobortis risus lectus id leo. Nunc vel diam vel nunc congue finibus.
        Vestibulum turpis tortor, pharetra sed ipsum eu, tincidunt imperdiet lorem. Donec rutrum purus at tincidunt sagittis. Quisque nec hendrerit justo.
      </td>
    </tr>
  </tbody>
</table>

Saya sudah mencari-cari ini, tapi kemudian saya sadar, sialan situs saya menggunakan php !!! Mengapa tidak menggunakan fungsi trim pada input teks dan mainkan dengan panjang maksimal ....

Berikut ini adalah solusi yang mungkin bagi mereka yang menggunakan php: http://ideone.com/PsTaI

<?php
$s = "In the beginning there was a tree.";
$max_length = 10;

if (strlen($s) > $max_length)
{
   $offset = ($max_length - 3) - strlen($s);
   $s = substr($s, 0, strrpos($s, ' ', $offset)) . '...';
}

echo $s;
?>