con

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

"..." verrà mostrato alla fine della riga se traboccato. Tuttavia, questo verrà mostrato solo in una riga. Ma vorrei che fosse mostrato su più righe.

Potrebbe apparire come:

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

Esistono anche diversi plugin jquery che affrontano questo problema, ma molti non gestiscono più righe di testo. I seguenti lavori:

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

Ci sono anche alcuni test di preformance .

Ho hackerato finché non sono riuscito a ottenere qualcosa di simile a questo. Viene fornito con alcuni avvertimenti:

1. Non è puro CSS; devi aggiungere alcuni elementi HTML. Non è tuttavia necessario JavaScript.
2. I puntini di sospensione sono allineati a destra sull'ultima riga. Ciò significa che se il testo non è allineato a destra o giustificato, potrebbe esserci un notevole divario tra l'ultima parola visibile e i puntini di sospensione (a seconda della lunghezza della prima parola nascosta).
3. Lo spazio per i puntini di sospensione è sempre riservato. Ciò significa che se il testo si adatta alla casella quasi con precisione, potrebbe essere inutilmente troncato (l'ultima parola è nascosta, anche se tecnicamente non dovrebbe).
4. Il testo deve avere un colore di sfondo fisso, poiché stiamo utilizzando rettangoli colorati per nascondere i puntini di sospensione nei casi in cui non è necessario.

Dovrei anche notare che il testo verrà spezzato a un confine di parola, non a un carattere. Questo è stato deliberato (poiché lo considero migliore per testi più lunghi), ma perché è diverso da ciòtext-overflow: ellipsis fa, ho pensato di doverlo menzionare.

Se riesci a convivere con questi avvertimenti, l'HTML è simile al seguente:

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

E questo è il CSS corrispondente, usando l'esempio di un riquadro largo 150 pixel con tre righe di testo su uno sfondo bianco. Presuppone che tu abbia un ripristino CSS o simile che imposta i margini e le imbottiture su zero dove necessario.

/* 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 */
}

Il risultato è simile al seguente:

Per chiarire come funziona, ecco la stessa immagine, tranne quella .hidedots1 è evidenziata in rosso e .hidedots2in ciano. Questi sono i rettangoli che nascondono i puntini di sospensione quando non c'è testo invisibile:

Testato su IE9, IE8 (emulato), Chrome, Firefox, Safari e Opera. Non funziona in IE7.

Ecco un recente articolo css-tricks che ne discute.

Alcune delle soluzioni nell'articolo sopra (che non sono menzionate qui) sono

1) -webkit-line-clamp e 2) Posizionare un elemento assolutamente posizionato in basso a destra con dissolvenza

Entrambi i metodi presuppongono il seguente markup:

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

con css

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

1) -webkit-line-clamp

line-clamp FIDDLE ( ..per un massimo di 3 linee)

.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) svanire

Supponiamo che tu abbia impostato l'altezza della linea su 1.2em. Se vogliamo esporre tre righe di testo, possiamo semplicemente rendere l'altezza del contenitore 3,6em (1,2em × 3). L'overflow nascosto nasconderà il resto.

Dissolvenza 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%);
}

Soluzione n. 3 - Una combinazione che utilizza @supports

Possiamo usare @supports per applicare il blocco della linea di webkit sui browser webkit e applicare la dissolvenza in altri browser.

@supports line-clamp con fiddle fallback a dissolvenza

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

Il link seguente fornisce una soluzione HTML / CSS pura a questo problema.

Supporto per browser - come indicato nell'articolo:

Finora abbiamo testato su Safari 5.0, IE 9 (deve essere in modalità standard), Opera 12 e Firefox 15.

I browser più vecchi continueranno a funzionare abbastanza bene, poiché la carne del layout ha normali proprietà di posizionamento, margine e imbottitura. se la tua piattaforma è più vecchia (ad esempio Firefox 3.6, IE 8), puoi utilizzare il metodo ma ripetere il gradiente come immagine PNG autonoma o filtro DirectX.

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

il 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); }

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

il violino

(ridimensiona la finestra del browser per i test)

Dopo aver esaminato le specifiche W3 per l'overflow del testo , non penso che ciò sia possibile utilizzando solo CSS. L'ellissi è una proprietà nuova, quindi probabilmente non ha ancora ricevuto molto utilizzo o feedback.

Tuttavia, questo ragazzo sembra aver fatto una domanda simile (o identica) e qualcuno è stato in grado di trovare una bella soluzione jQuery. Puoi provare la soluzione qui: http://jsfiddle.net/MPkSF/

Se javascript non è un'opzione, penso che potresti essere sfortunato ...

Voglio solo aggiungere a questa domanda per completezza.

• Opera ha un supporto non standard per questo chiamato -o-ellipsis-lastline .
• dotdotdot è un ottimo plugin jQuery che posso consigliare.

Ottima domanda ... Vorrei che ci fosse una risposta, ma questa è la più vicina che puoi ottenere con i CSS in questi giorni. Nessun puntino di sospensione, ma comunque abbastanza utilizzabile.

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

Ho trovato questa soluzione css (scss) che funziona abbastanza bene. Sui browser webkit mostra i puntini di sospensione e su altri browser tronca semplicemente il testo. Il che va bene per l'uso previsto.

$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;
}

Un esempio del creatore: http://codepen.io/martinwolf/pen/qlFdp

Ecco la soluzione più vicina che potrei ottenere usando solo 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 ( ridimensiona la finestra per controllare )

Link al mio blog per una spiegazione

Fiddle aggiornato

Spero ora che qualche esperto di CSS abbia avuto un'idea su come renderlo perfetto. :)

Ci sono molte risposte qui, ma avevo bisogno di una che fosse:

• Solo CSS
• A prova di futuro (diventa più compatibile con il tempo)
• Non spezzare le parole (solo interruzioni negli spazi)

L'avvertenza è che non fornisce i puntini di sospensione per i browser che non supportano la -webkit-line-clampregola (attualmente IE, Edge, Firefox) ma usa una sfumatura per sfumare il loro testo.

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

Puoi vederlo in azione in questa CodePen e puoi anche vedere una versione Javascript qui (no jQuery).

Un po 'tardi a questa festa, ma mi è venuta in mente, quello che penso, è una soluzione unica. Invece di provare a inserire i tuoi puntini di sospensione tra i trucchi CSS o i js, ho pensato di provare a rotolare con la sola riga di restrizione. Quindi duplico il testo per ogni "riga" e uso solo un rientro di testo negativo per assicurarmi che una riga inizi dove finisce l'ultima. VIOLINO

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>

Maggiori dettagli nel violino. Si è verificato un problema con il browser durante il reflow per il quale utilizzo un ridisegno di JS e quindi verificalo, ma questo è il concetto di base. Eventuali pensieri / suggerimenti sono molto apprezzati.

grazie @balpha e @Kevin, unisco due metodi insieme.

non è necessario js in questo metodo.

è possibile utilizzare background-imagee non è necessario alcun gradiente per nascondere i punti.

il innerHTMLdi .ellipsis-placeholdernon è necessario, io uso .ellipsis-placeholderper mantenere la stessa larghezza e altezza con .ellipsis-more. display: inline-blockInvece potresti usare .

.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

la soluzione javascript sarà migliore

• ottenere il numero di righe del testo
• is-ellipsisattiva o disattiva la classe se la finestra viene ridimensionata o eluita cambia

getRowRects

Element.getClientRects()funziona come questo

ogni recto nella stessa riga ha lo stesso topvalore, quindi scopri i rect con topvalore diverso , in questo modo

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

galleggiante ...more

come questo

rileva il ridimensionamento della finestra o l'elemento è cambiato

come questo

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

vedi di più clicca qui

un metodo css puro basato su -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>

Ho trovato un trucco javascript, ma devi usare la lunghezza della stringa. Diciamo che vuoi 3 linee di larghezza 250px, puoi calcolare la lunghezza per linea cioè

//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;
}