dengan

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

"..." akan ditampilkan di akhir baris jika meluap. Namun, ini hanya akan ditampilkan dalam satu baris. Tapi saya ingin ditampilkan dalam multi-baris.

Ini mungkin terlihat seperti:

+--------------------+
|abcde feg hij   dkjd|
|dsji jdia js ajid  s|
|jdis ajid dheu d ...|/*Here it's overflowed, so "..." is shown. */
+--------------------+

Ada juga beberapa plugin jquery yang menangani masalah ini, tetapi banyak yang tidak menangani banyak baris teks. Karya berikut:

• http://pvdspek.github.com/jquery.autoellipsis/
• http://dotdotdot.frebsite.nl/
• http://keith-wood.name/more.html
• http://github.com/tbasse/jquery-truncate

Ada juga beberapa tes dalm .

Saya telah meretas sampai saya berhasil mencapai sesuatu yang dekat dengan ini. Itu datang dengan beberapa peringatan:

1. Itu bukan CSS murni; Anda harus menambahkan beberapa elemen HTML. Namun demikian tidak diperlukan JavaScript.
2. Elipsis lurus di baris terakhir. Ini berarti bahwa jika teks Anda tidak sejajar atau dibenarkan, mungkin ada jarak yang mencolok antara kata terakhir yang terlihat dan elipsis (tergantung pada panjang kata tersembunyi pertama).
3. Ruang untuk elipsis selalu disediakan. Ini berarti bahwa jika teks pas di dalam kotak hampir tepat, mungkin tidak perlu terpotong (kata terakhir disembunyikan, meskipun secara teknis tidak harus).
4. Teks Anda harus memiliki warna latar tetap, karena kami menggunakan persegi panjang berwarna untuk menyembunyikan elipsis dalam kasus di mana itu tidak diperlukan.

Saya juga harus mencatat bahwa teks akan dipecah pada batas kata, bukan batas karakter. Ini disengaja (karena saya menganggap itu lebih baik untuk teks yang lebih panjang), tetapi karena berbeda dari apa text-overflow: ellipsis, saya pikir saya harus menyebutkannya.

Jika Anda dapat hidup dengan peringatan ini, HTML akan terlihat seperti ini:

<div class="ellipsify">
    <div class="pre-dots"></div>
    <div class="dots">&hellip;</div>
    <!-- your text here -->
    <span class="hidedots1"></span>
    <div class="hidedots2"></div>
</div>

Dan ini adalah CSS yang sesuai, menggunakan contoh kotak lebar 150 piksel dengan tiga baris teks pada latar belakang putih. Ini mengasumsikan Anda memiliki reset CSS atau yang serupa yang menetapkan margin dan bantalan ke nol jika diperlukan.

/* the wrapper */
.ellipsify {
    font-size:12px;
    line-height:18px;
    height: 54px;       /* 3x line height */
    width: 150px;
    overflow: hidden;
    position: relative; /* so we're a positioning parent for the dot hiders */
    background: white;
}

/* Used to push down .dots. Can't use absolute positioning, since that
   would stop the floating. Can't use relative positioning, since that
   would cause floating in the wrong (namely: original) place. Can't 
   change height of #dots, since it would have the full width, and
   thus cause early wrapping on all lines. */
.pre-dots {
    float: right;
    height: 36px;  /* 2x line height (one less than visible lines) */
}

.dots {
    float: right; /* to make the text wrap around the dots */
    clear: right; /* to push us below (not next to) .pre-dots */
}

/* hides the dots if the text has *exactly* 3 lines */
.hidedots1 {
    background: white;
    width: 150px;
    height: 18px;       /* line height */
    position: absolute; /* otherwise, because of the width, it'll be wrapped */
}

/* hides the dots if the text has *less than* 3 lines */
.hidedots2 {
    background: white; 
    width: 150px;
    height: 54px;       /* 3x line height, to ensure hiding even if empty */
    position: absolute; /* ensures we're above the dots */
}

Hasilnya terlihat seperti ini:

Untuk memperjelas cara kerjanya, inilah gambar yang sama, kecuali yang .hidedots1berwarna merah, dan .hidedots2cyan. Ini adalah persegi panjang yang menyembunyikan elips ketika tidak ada teks yang tidak terlihat:

Diuji dalam IE9, IE8 (ditiru), Chrome, Firefox, Safari, dan Opera. Tidak berfungsi di IE7.

Inilah artikel trik-css terbaru yang membahas hal ini.

Beberapa solusi dalam artikel di atas (yang tidak disebutkan di sini) adalah

1) -webkit-line-clampdan 2) Tempatkan elemen yang benar-benar diposisikan di kanan bawah dengan fade out

Kedua metode mengasumsikan markup berikut:

<div class="module"> /* Add line-clamp/fade class here*/
  <p>Text here</p>
</div>

dengan css

.module {
  width: 250px;
  overflow: hidden;
}

1) -webkit-line-clamp

line-clamp FIDDLE (..untuk maksimal 3 baris)

.line-clamp {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;  
  max-height: 3.6em; /* I needed this to get it to work */
}

2) menghilang

Katakanlah Anda mengatur ketinggian garis ke 1.2em. Jika kita ingin mengekspos tiga baris teks, kita bisa membuat tinggi wadah 3.6em (1.2em × 3). Overflow tersembunyi akan menyembunyikan sisanya.

Fade out FIDDLE

p
{
    margin:0;padding:0;
}
.module {
  width: 250px;
  overflow: hidden;
  border: 1px solid green;
  margin: 10px;
}

.fade {
  position: relative;
  height: 3.6em; /* exactly three lines */
}
.fade:after {
  content: "";
  text-align: right;
  position: absolute;
  bottom: 0;
  right: 0;
  width: 70%;
  height: 1.2em;
  background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 50%);
}

Solusi # 3 - Kombinasi menggunakan @supports

Kita dapat menggunakan @supports untuk menerapkan penjepit baris webkit di browser webkit dan menerapkan fade out di browser lain.

@mendukung line-clamp dengan fade fallback fiddle

<div class="module line-clamp">
  <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
</div>

CSS

.module {
  width: 250px;
  overflow: hidden;
  border: 1px solid green;
  margin: 10px;
}

.line-clamp {
      position: relative;
      height: 3.6em; /* exactly three lines */
    }
.line-clamp:after {
      content: "";
      text-align: right;
      position: absolute;
      bottom: 0;
      right: 0;
      width: 70%;
      height: 1.2em;
      background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 50%);
 }

@supports (-webkit-line-clamp: 3) {
    .line-clamp {
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;  
        max-height:3.6em; /* I needed this to get it to work */
        height: auto;
    }
    .line-clamp:after {
        display: none;
    }
}

Tautan di bawah ini menyediakan solusi HTML / CSS murni untuk masalah ini.

Dukungan browser - sebagaimana dinyatakan dalam artikel:

Sejauh ini kami telah menguji pada Safari 5.0, IE 9 (harus dalam mode standar), Opera 12 dan Firefox 15.

Peramban yang lebih lama masih akan bekerja dengan baik, karena daging dari tata letak berada dalam posisi normal, margin dan properti padding. jika platform Anda lebih tua (mis. Firefox 3.6, IE 8), Anda dapat menggunakan metode ini tetapi mengulang gradien sebagai gambar PNG mandiri atau filter DirectX.

http://www.mobify.com/dev/multiline-ellipsis-in-pure-css

css:

p { margin: 0; padding: 0; font-family: sans-serif;}

.ellipsis {
    overflow: hidden;
    height: 200px;
    line-height: 25px;
    margin: 20px;
    border: 5px solid #AAA; }

.ellipsis:before {
    content:"";
    float: left;
    width: 5px; height: 200px; }

.ellipsis > *:first-child {
    float: right;
    width: 100%;
    margin-left: -5px; }        

.ellipsis:after {
    content: "\02026";  

    box-sizing: content-box;
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;

    float: right; position: relative;
    top: -25px; left: 100%; 
    width: 3em; margin-left: -3em;
    padding-right: 5px;

    text-align: right;

    background: -webkit-gradient(linear, left top, right top,
        from(rgba(255, 255, 255, 0)), to(white), color-stop(50%, white));
    background: -moz-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);           
    background: -o-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
    background: -ms-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
    background: linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white); }

html:

<div class="ellipsis">
    <div>
        <p>Call me Ishmael.  Some years ago &ndash; never mind how long precisely &ndash; having little or no money in my purse, and nothing particular to interest me on shore, I thought I would sail about a little and see the watery part of the world.  It is a way I have of driving off the spleen, and regulating the circulation.  Whenever I find myself growing grim about the mouth; whenever it is a damp, drizzly November in my soul; whenever I find myself involuntarily pausing before coffin warehouses, and bringing up the rear of every funeral I meet; and especially whenever my hypos get such an upper hand of me, that it requires a strong moral principle to prevent me from deliberately stepping into the street, and methodically knocking people's hats off &ndash; then, I account it high time to get to sea as soon as I can.</p>  
    </div>
</div>

yang biola

(mengubah ukuran jendela browser untuk pengujian)

Setelah melihat spesifikasi W3 untuk text-overflow , saya tidak berpikir ini mungkin hanya menggunakan CSS. Ellipsis adalah properti new-ish, jadi mungkin belum menerima banyak penggunaan atau umpan balik.

Namun, orang ini tampaknya telah mengajukan pertanyaan yang serupa (atau identik), dan seseorang dapat menemukan solusi jQuery yang bagus. Anda dapat demo solusinya di sini: http://jsfiddle.net/MPkSF/

Jika javascript bukan opsi, saya pikir Anda mungkin kurang beruntung ...

Hanya ingin menambahkan pertanyaan ini demi kelengkapan.

• Opera memiliki dukungan non-standar untuk ini -o-ellipsis-lastline .
• dotdotdot adalah plugin jQuery yang bagus yang bisa saya rekomendasikan.

Pertanyaan yang bagus ... Saya berharap ada jawaban, tapi ini adalah yang terdekat yang bisa Anda dapatkan dengan CSS hari ini. Tidak ada elipsis, tetapi masih bisa digunakan.

overflow: hidden;
line-height: 1.2em;
height: 3.6em;      // 3 lines * line-height

Saya telah menemukan solusi css (scss) ini yang bekerja dengan sangat baik. Pada browser webKit ia menunjukkan elipsis dan pada browser lain itu hanya memotong teks. Yang baik untuk penggunaan yang saya maksudkan.

$font-size: 26px;
$line-height: 1.4;
$lines-to-show: 3;

h2 {
  display: block; /* Fallback for non-webkit */
  display: -webkit-box;
  max-width: 400px;
  height: $font-size*$line-height*$lines-to-show; /* Fallback for non-webkit */
  margin: 0 auto;
  font-size: $font-size;
  line-height: $line-height;
  -webkit-line-clamp: $lines-to-show;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

Contoh oleh pencipta: http://codepen.io/martinwolf/pen/qlFdp

Ini adalah solusi terdekat yang bisa saya gunakan hanya dengan css.

HTML

<div class="ellipsis"> <span>...</span>
Hello this is Mr_Green from Stackoverflow. I love CSS. I live in CSS and I will never leave working on CSS even my work is on other technologies.</div>

CSS

div {
    height: 3em;
    line-height: 1.5em;
    width: 80%;
    border: 1px solid green;
    overflow: hidden;
    position: relative;
}
div:after {
    content:". . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .  . . . . . . . . . . . . . . . . . . . . . . . . . . . .";
    background-color: white;
    color: white;
    display: inline;
    position: relative;
    box-shadow: 8px 1px 1px white;
    z-index: 1;
}
span {
    position: absolute;
    bottom: 0px;
    right: 0px;
    background-color: white;
}

Working Fiddle ( mengubah ukuran jendela untuk memeriksa )

Tautan ke blog saya untuk penjelasan

Biola yang Diperbarui

Saya harap sekarang beberapa ahli css akan mendapat ide tentang bagaimana membuatnya sempurna. :)

Ada banyak jawaban di sini tetapi saya membutuhkannya:

• Hanya CSS
• Bukti masa depan (semakin kompatibel dengan waktu)
• Tidak akan memecah kata-kata (hanya istirahat pada spasi)

Peringatannya adalah bahwa ia tidak menyediakan elipsis untuk browser yang tidak mendukung -webkit-line-clampaturan (saat ini IE, Edge, Firefox) tetapi tidak menggunakan gradien untuk memudar teks mereka.

.clampMe {
  position: relative;
  height: 2.4em; 
  overflow: hidden;
}

.clampMe:after {
  content: "";
  text-align: right;
  position: absolute;
  bottom: 0;
  right: 0;
  width: 50%;
  height: 1.2em; /* Just use multiples of the line-height */
  background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 80%);
}

/* Now add in code for the browsers that support -webkit-line-clamp and overwrite the non-supportive stuff */
@supports (-webkit-line-clamp: 2) {
  .clampMe {
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
  }
  
  .clampMe:after {
    display: none;
  }
}

<p class="clampMe">There's a lot more text in here than what you'll ever see. Pellentesque habitant testalotish morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>

Anda dapat melihatnya beraksi di CodePen ini dan Anda juga dapat melihat versi Javascript di sini (tanpa jQuery).

Agak terlambat ke pesta ini tetapi saya datang dengan, apa yang saya pikirkan, adalah solusi unik. Daripada mencoba memasukkan elipsis Anda sendiri melalui tipuan css atau js saya pikir saya akan mencoba dan roll dengan satu-satunya batasan garis. Jadi saya menduplikasi teks untuk setiap "baris" dan hanya menggunakan indentasi teks negatif untuk memastikan satu baris dimulai di mana yang terakhir berhenti. BIOLA

CSS:

#wrapper{
    font-size: 20pt;
    line-height: 22pt;
    width: 100%;
    overflow: hidden;
    padding: 0;
    margin: 0;
}

.text-block-line{
    height: 22pt;
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    white-space: nowrap;
    width: auto;
}
.text-block-line:last-child{
    text-overflow: ellipsis;
}

/*the follwing is suboptimal but neccesary I think. I'd probably just make a sass mixin that I can feed a max number of lines to and have them avialable. Number of lines will need to be controlled by server or client template which is no worse than doing a character count clip server side now. */
.line2{
    text-indent: -100%;
}
.line3{
    text-indent: -200%;
}
.line4{
    text-indent: -300%;
}

HTML:

<p id="wrapper" class="redraw">
    <span class="text-block-line line1">This text is repeated for every line that you want to be displayed in your element. This example has a max of 4 lines before the ellipsis occurs. Try scaling the preview window width to see the effect.</span>
    <span class="text-block-line line2">This text is repeated for every line that you want to be displayed in your element. This example has a max of 4 lines before the ellipsis occurs. Try scaling the preview window width to see the effect.</span>
    <span class="text-block-line line3">This text is repeated for every line that you want to be displayed in your element. This example has a max of 4 lines before the ellipsis occurs. Try scaling the preview window width to see the effect.</span>
    <span class="text-block-line line4">This text is repeated for every line that you want to be displayed in your element. This example has a max of 4 lines before the ellipsis occurs. Try scaling the preview window width to see the effect.</span>
</p>

Lebih detail di biola. Ada masalah dengan peramban yang direfleksikan bahwa saya menggunakan redraw JS untuk dan sebagainya, jadi periksalah, tetapi ini adalah konsep dasarnya. Setiap pemikiran / saran sangat dihargai.

terima kasih @balpha dan @Kevin, saya menggabungkan dua metode bersama.

tidak dibutuhkan js dalam metode ini.

Anda dapat menggunakan background-imagedan tidak ada gradien yang diperlukan untuk menyembunyikan titik.

yang innerHTMLdari .ellipsis-placeholdertidak diperlukan, saya menggunakan .ellipsis-placeholderuntuk menjaga lebar yang sama dan tinggi dengan .ellipsis-more. Anda bisa menggunakannya display: inline-blocksebagai gantinya.

.ellipsis {
    overflow: hidden;
    position: relative;
}
.ellipsis-more-top {/*push down .ellipsis-more*/
    content: "";
    float: left;
    width: 5px;
}
.ellipsis-text-container {
    float: right;
    width: 100%;
    margin-left: -5px;
}
.ellipsis-more-container {
    float: right;
    position: relative;
    left: 100%;
    width: 5px;
    margin-left: -5px;
    border-right: solid 5px transparent;
    white-space: nowrap;
}
.ellipsis-placeholder {/*keep text around ,keep it transparent ,keep same width and height as .ellipsis-more*/
    float: right;
    clear: right;
    color: transparent;
}
.ellipsis-placeholder-top {/*push down .ellipsis-placeholder*/
    float: right;
    width: 0;
}
.ellipsis-more {/*ellipsis things here*/
    float: right;
}
.ellipsis-height {/*the total height*/
    height: 3.6em;
}
.ellipsis-line-height {/*the line-height*/
    line-height: 1.2;
}
.ellipsis-margin-top {/*one line height*/
    margin-top: -1.2em;
}
.ellipsis-text {
    word-break: break-all;
}

<div class="ellipsis ellipsis-height ellipsis-line-height">
    <div class="ellipsis-more-top ellipsis-height"></div>
    <div class="ellipsis-text-container">
        <div class="ellipsis-placeholder-top ellipsis-height ellipsis-margin-top"></div>
        <div class="ellipsis-placeholder">
           <span>...</span><span>more</span>
        </div>
        <span class="ellipsis-text">text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text </span>
    </div>
    <div class="ellipsis-more-container ellipsis-margin-top">
        <div class="ellipsis-more">
            <span>...</span><span>more</span>
        </div>
    </div>
</div>

jsfiddler

solusi javascript akan lebih baik

• dapatkan jumlah baris teks
• beralih is-ellipsiskelas jika ukuran jendela atau perubahan elment

getRowRects

Element.getClientRects()bekerja seperti ini

setiap rect di baris yang sama memiliki nilai yang sama top, jadi cari tahu rect dengan topnilai yang berbeda , seperti ini

function getRowRects(element) {
    var rects = [],
        clientRects = element.getClientRects(),
        len = clientRects.length,
        clientRect, top, rectsLen, rect, i;

    for(i=0; i<len; i++) {
        has = false;
        rectsLen = rects.length;
        clientRect = clientRects[i];
        top = clientRect.top;
        while(rectsLen--) {
            rect = rects[rectsLen];
            if (rect.top == top) {
                has = true;
                break;
            }
        }
        if(has) {
            rect.right = rect.right > clientRect.right ? rect.right : clientRect.right;
            rect.width = rect.right - rect.left;
        }
        else {
            rects.push({
                top: clientRect.top,
                right: clientRect.right,
                bottom: clientRect.bottom,
                left: clientRect.left,
                width: clientRect.width,
                height: clientRect.height
            });
        }
    }
    return rects;
}

mengapung ...more

seperti ini

mendeteksi ukuran jendela atau elemen diubah

seperti ini

display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical; 

lihat lebih banyak klik di sini

basis metode css murni pada -webkit-line-clamp:

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

Saya menemukan trik javascript, tetapi Anda harus menggunakan panjang string. Katakanlah Anda ingin 3 baris lebar 250px, Anda dapat menghitung panjang per baris yaitu

//get the total character length.
//Haha this might vary if you have a text with lots of "i" vs "w"
var totalLength = (width / yourFontSize) * yourNumberOfLines

//then ellipsify
function shorten(text, totalLength) {
    var ret = text;
    if (ret.length > totalLength) {
        ret = ret.substr(0, totalLength-3) + "...";
    }
    return ret;
}