css ellipsis di baris kedua

CSS text-overflow: ellipsisdi baris kedua, apakah ini mungkin? Saya tidak dapat menemukannya di internet.

contoh:

yang saya inginkan adalah seperti ini:

I hope someone could help me. I need 
an ellipsis on the second line of...

tetapi yang terjadi adalah ini:

I hope someone could help me. I ... 

Persyaratan untuk text-overflow: ellipsis;bekerja adalah versi satu baris white-space( pre, nowrapdll). Yang berarti teks tidak akan pernah mencapai baris kedua.

Jadi. Tidak mungkin dalam CSS murni.

Sumber saya ketika saya sedang mencari hal yang sama persis sekarang: http://www.quirksmode.org/css/textoverflow.html (Quirksmode ftw!)

EDIT Jika dewa CSS yang baik akan mengimplementasikan http://www.w3.org/TR/css-overflow-3/#max-lines kita dapat memperbaharuinya dalam CSS murni menggunakan fragments(baru) dan max-lines(baru). Juga beberapa info lebih lanjut tentang http://css-tricks.com/line-clampin/

EDIT 2 WebKit / Blink memiliki line-clamp: -webkit-line-clamp: 2akan menempatkan ellipsis di baris ke-2.

Ini seharusnya berfungsi di browser webkit :

overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;

Seperti yang sudah dijawab orang lain, solusi CSS murni tidak ada. Ada plugin jQuery yang sangat mudah digunakan, disebut dotdotdot . Ia menggunakan lebar dan tinggi wadah untuk menghitung jika perlu memotong dan menambahkan elipsis.

$("#multilinedElement").dotdotdot();

Ini jsFiddle .

Saya menemukan bahwa jawaban Skeep tidak cukup dan membutuhkan overflowgaya juga:

overflow: hidden;
text-overflow: ellipsis;
-webkit-line-clamp: 2;
display: -webkit-box;
-webkit-box-orient: vertical;

jika seseorang menggunakan SASS / SCSS dan menemukan pertanyaan ini - mungkin mixin ini bisa membantu:

@mixin line-clamp($numLines : 1, $lineHeight: 1.412) {
  overflow: hidden;
  text-overflow: -o-ellipsis-lastline;
  text-overflow: ellipsis;
  display: block;
  /* autoprefixer: off */
  display: -webkit-box;
  -webkit-line-clamp: $numLines;
  -webkit-box-orient: vertical;
  max-height: $numLines * $lineHeight + unquote('em');
}

ini hanya menambahkan ellipsis di browser webkit. sisanya hanya memotongnya saja.

Cukup gunakan garis-penjepit untuk browser yang mendukungnya (sebagian besar browser modern) dan kembali ke 1 baris untuk yang lebih lama.

  .text {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;


    @supports (-webkit-line-clamp: 2) {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: initial;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }
  }

Sayang sekali Anda tidak bisa membuatnya bekerja lebih dari dua baris! Akan luar biasa jika elemennya adalah tampilan blok dan memiliki ketinggian diatur ke 2em atau sesuatu, dan ketika teks meluap akan menampilkan ellipsis!

Untuk satu liner, Anda dapat menggunakan:

.show-ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

Untuk beberapa baris mungkin Anda bisa menggunakan Polyfill seperti jQuery autoellipsis yang ada di github http://pvdspek.github.com/jquery.autoellipsis/

Saya bukan pro JS, tapi saya menemukan beberapa cara Anda bisa melakukan ini.

HTML:

<p id="truncate">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi elementum consequat tortor et euismod. Nam commodo consequat libero vel lobortis. Morbi ac nisi at leo vehicula consectetur.</p>

Kemudian dengan jQuery Anda memotongnya ke jumlah karakter tertentu tetapi meninggalkan kata terakhir seperti ini:

// Truncate but leave last word
var myTag = $('#truncate').text();
if (myTag.length > 100) {
  var truncated = myTag.trim().substring(0, 100).split(" ").slice(0, -1).join(" ") + "…";
  $('#truncate').text(truncated);
}

Hasilnya terlihat seperti ini:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi
Elementum sebagai konsekuensi dari tortor et…

Atau, Anda bisa memotongnya ke jumlah karakter tertentu seperti ini:

// Truncate to specific character
var myTag = $('#truncate').text();
if (myTag.length > 15) {
  var truncated = myTag.trim().substring(0, 100) + "…";
  $('#truncate').text(truncated);
}

Hasilnya terlihat seperti ini:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi
elementum yang diakibatkan tortor et euismod ...

Semoga itu bisa membantu sedikit.

Ini jsFiddle .

di sini adalah contoh yang baik di css murni.

.container{
  width: 200px;
}
.block-with-text {
  overflow: hidden;
  position: relative; 
  line-height: 1.2em;
  max-height: 3.6em;
  text-align: justify;  
  margin-right: -1em;
  padding-right: 1em;
}
.block-with-text+.block-with-text{
  margin-top:10px;
}
.block-with-text:before {
  content: '...';
  position: absolute;
  right: 0;
  bottom: 0;
}
.block-with-text:after {
  content: '';
  position: absolute;
  right: 0;
  width: 1em;
  height: 1em;
  margin-top: 0.2em;
  background: white;
}

<div class="container">


<div class="block-with-text">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a
</div>

<div class="block-with-text">
Lorem Ipsum is simply dummy text of the printing and typesetting industry
</div>


<div class="block-with-text">
Lorem Ipsum is simply
</div>

</div>

Saya telah menggunakan plugin jQuery-condense-plugin sebelumnya, yang sepertinya dapat melakukan apa yang Anda inginkan. Jika tidak, ada beberapa plugin yang mungkin sesuai dengan kebutuhan Anda.

Sunting: Membuat Anda demo - perhatikan bahwa saya menautkan jquery.condense.js pada demo yang melakukan keajaiban, kredit penuh untuk pembuat plugin itu :)

Ini adalah CSS non-standar, yang tidak tercakup dalam versi CSS saat ini (Firefox tidak mendukungnya). Coba gunakan JavaScript sebagai gantinya.

Cara css murni memangkas teks multiline dengan ellipsis

Sesuaikan hight kontener teks, baris kontrol untuk dipecah oleh -webkit-line-clamp: 2;

.block-ellipsis {
  display: block;
  display: -webkit-box;
  max-width: 100%;
  height: 30px;
  margin: 0 auto;
  font-size: 14px;
  line-height: 1;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

Saya telah bertemu masalah ini sebelumnya, dan tidak ada solusi css murni

Itu sebabnya saya telah mengembangkan perpustakaan kecil untuk menangani masalah ini (antara lain). Perpustakaan menyediakan objek untuk memodelkan dan melakukan rendering teks tingkat huruf. Misalnya Anda dapat meniru teks-overflow: ellipsis dengan batas arbitrer (tidak perlu satu baris)

Baca lebih lanjut di http://www.samuelrossille.com/home/jstext.html untuk tangkapan layar, tutorial, dan tautan dowload.

Jika ada yang mencoba membuat garis-penjepit bekerja di flexbox , itu sedikit rumit - terutama sekali Anda melakukan tes penyiksaan dengan kata-kata yang sangat panjang. Satu-satunya perbedaan nyata dalam cuplikan kode ini adalah min-width: 0;pada item fleksibel yang berisi teks terpotong, dan word-wrap: break-word;. Hat-tip untuk https://css-tricks.com/flexbox-truncated-text/ untuk wawasan. Penafian: ini masih webkit sejauh yang saya tahu.

.flex-parent {
  display: flex;
}

.short-and-fixed {
  width: 30px;
  height: 30px;
  background: lightgreen;
}

.long-and-truncated {
  margin: 0 20px;
  flex: 1;
  min-width: 0;/* Important for long words! */
}

.long-and-truncated span {
  display: inline;
  -webkit-line-clamp: 3;
  text-overflow: ellipsis;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  word-wrap: break-word;/* Important for long words! */
}

<div class="flex-parent">
  <div class="flex-child short-and-fixed">
  </div>
  <div class="flex-child long-and-truncated">
    <span>asdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasd</span>
  </div>
  <div class="flex-child short-and-fixed">
  </div>
</div>

http://codepen.io/AlgeoMA/pen/JNvJdx (versi codepen)

Semua jawaban di sini salah, mereka kehilangan bagian penting, tingginya

.container{
    width:200px;
    height:600px;
    background:red
}
.title {
        overflow: hidden;
        line-height: 20px;
        height: 40px;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }
<div class="container">
    <div class="title">this is a long text you cant cut it in half</div>
</div>

metode css murni berdasarkan -webkit-line-clamp, yang bekerja di webkit:

@-webkit-keyframes ellipsis {/*for test*/
    0% { width: 622px }
    50% { width: 311px }
    100% { width: 622px }
}
.ellipsis {
    max-height: 40px;/* h*n */
    overflow: hidden;
    background: #eee;

    -webkit-animation: ellipsis ease 5s infinite;/*for test*/
    /**
    overflow: visible;
    /**/
}
.ellipsis .content {
    position: relative;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-box-pack: center;
    font-size: 50px;/* w */
    line-height: 20px;/* line-height h */
    color: transparent;
    -webkit-line-clamp: 2;/* max row number n */
    vertical-align: top;
}
.ellipsis .text {
    display: inline;
    vertical-align: top;
    font-size: 14px;
    color: #000;
}
.ellipsis .overlay {
    position: absolute;
    top: 0;
    left: 50%;
    width: 100%;
    height: 100%;
    overflow: hidden;

    /**
    overflow: visible;
    left: 0;
    background: rgba(0,0,0,.5);
    /**/
}
.ellipsis .overlay:before {
    content: "";
    display: block;
    float: left;
    width: 50%;
    height: 100%;

    /**
    background: lightgreen;
    /**/
}
.ellipsis .placeholder {
    float: left;
    width: 50%;
    height: 40px;/* h*n */

    /**
    background: lightblue;
    /**/
}
.ellipsis .more {
    position: relative;
    top: -20px;/* -h */
    left: -50px;/* -w */
    float: left;
    color: #000;
    width: 50px;/* width of the .more w */
    height: 20px;/* h */
    font-size: 14px;

    /**
    top: 0;
    left: 0;
    background: orange;
    /**/
}

<div class='ellipsis'>
    <div class='content'>
        <div class='text'>text text text text text text text text text text text text text text text text text text text text text </div>
        <div class='overlay'>
            <div class='placeholder'></div>
            <div class='more'>...more</div>
        </div>
    </div>
</div>

Tidak ada cara mudah nyata untuk melakukan ini. Gunakan perpustakaan Clamp.js .

$clamp(myHeader, {clamp: 3});

Saya menemukan solusi namun Anda perlu mengetahui panjang karakter kasar yang cocok dengan area teks Anda, kemudian bergabung dengan ... ke ruang sebelumnya.

Cara saya melakukan ini adalah:

1. anggap panjang karakter kasar (dalam hal ini 200) dan beralih ke fungsi bersama teks Anda
2. pisahkan spasi sehingga Anda memiliki satu string panjang
3. gunakan jQuery untuk mendapatkan irisan "" spasi pertama setelah panjang karakter Anda
4. bergabung dengan yang tersisa ...

kode:

truncate = function(description){
        return description.split('').slice(0, description.lastIndexOf(" ",200)).join('') + "...";           
}

di sini adalah biola - http://jsfiddle.net/GYsW6/1/