Con CSS, usa “…” per il blocco overflow delle multi-linee

con

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

“…” verrà visualizzato alla fine della riga se è in overflow. Tuttavia, questo verrà mostrato solo in una riga. Ma vorrei che fosse mostrato in più righe.

Potrebbe sembrare:

 +--------------------+ |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 trattano questo problema, ma molti non gestiscono più righe di testo. Seguenti lavori:

Ci sono anche alcuni test di preformance .

Ho hackerato fino a quando non sono riuscito a ottenere qualcosa di simile. Viene fornito con alcuni avvertimenti:

  1. Non è puro CSS; devi aggiungere alcuni elementi HTML. Non è tuttavia richiesto JavaScript.
  2. I puntini di sospensione sono allineati a destra sull’ultima riga. Ciò significa che se il tuo testo non è allineato a destra o giustificato, potrebbe esserci una notevole differenza tra l’ultima parola visibile e l’ellissi (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 inserisce nella 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é utilizziamo rettangoli colorati per hide i puntini di sospensione nei casi in cui non è necessario.

Dovrei anche notare che il testo sarà rotto a un confine di parole, non a un limite di carattere. Questo è stato intenzionale (poiché lo considero migliore per i testi più lunghi), ma perché è diverso da quale text-overflow: ellipsis fa, ho pensato di doverlo menzionare.

Se riesci a convivere con questi avvertimenti, l’HTML si presenta così:

 

E questo è il CSS corrispondente, usando l’esempio di una scatola larga 150 pixel con tre linee di testo su uno sfondo bianco. Presuppone che tu abbia un reset CSS o simile che azzeri i margini e i paddings 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 a questo:

immagine del risultato reso con diverse lunghezze di testo

Per chiarire come funziona, ecco la stessa immagine, eccetto che .hidedots1 è evidenziato in rosso e .hidedots2 in ciano. Questi sono i rettangoli che nascondono i puntini di sospensione quando non c’è testo invisibile:

la stessa immagine di sopra, tranne per il fatto che gli elementi di aiuto sono evidenziati a colori

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

Ecco un recente articolo sui trucchi che discute di questo.

Alcune delle soluzioni nell’articolo di cui sopra (che non sono menzionate qui) sono

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

Entrambi i metodi presuppongono il seguente markup:

 
/* Add line-clamp/fade class here*/

Text here

con css

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

1) -webkit-line-clamp

FIDDLE line-clamp ( ..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) scompare

Diciamo che hai 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.

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

Soluzione n. 3 – Una combinazione che utilizza @supports

Possiamo usare @supports per applicare il line-clamp del webkit sui browser webkit e applicare la dissolvenza in altri browser.

@supporta il line-clamp con dissolvenza del violino di fallback

 

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.

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 sottostante fornisce una soluzione HTML / CSS pura a questo problema.

Supporto del browser – come indicato nell’articolo:

Finora abbiamo testato 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 è in normale posizionamento, margine e proprietà di riempimento. se la tua piattaforma è più vecchia (es. Firefox 3.6, IE 8), puoi usare il metodo ma ripetere la sfumatura 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:

 

Call me Ishmael. Some years ago – never mind how long precisely – 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 – then, I account it high time to get to sea as soon as I can.

il violino

(ridimensiona la finestra del browser per il test)

Dopo aver esaminato le specifiche W3 per l’overflow del testo , non penso sia ansible utilizzare solo CSS. L’ellissi è una proprietà new-ish, quindi probabilmente non ha ancora ricevuto molti usi o feedback.

Tuttavia, sembra che questo tizio abbia posto una domanda simile (o identica) e qualcuno è riuscito a trovare una soluzione jQuery carina. 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-ellissi-last-line .
  • dotdotdot è un ottimo plugin jQuery che posso consigliare.

Grande domanda … Vorrei che ci fosse una risposta, ma questo è il più vicino che puoi ottenere con CSS in questi giorni. Senza ellissi, 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 si limita a troncare il testo. Che va bene per il mio 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

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

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 spiegazioni

Fiddle aggiornato

Spero che qualche esperto di css abbia avuto un’idea su come renderlo perfetto. 🙂

Nel tuo caso, quanto segue deve essere efficiente e sufficiente.

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

Un po ‘in ritardo per questa festa, ma mi è venuta in mente, quello che penso, è una soluzione unica. Piuttosto che cercare di inserire i propri puntini di sospensione tramite il css trickery o js, ​​ho pensato di provare a eseguire il roll con la restrizione della sola riga. Quindi duplo il testo per ogni “linea” e uso solo un trattino di testo negativo per assicurarsi che una riga inizi dove si ferma 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:

 

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

Maggiori dettagli nel violino. C’è un problema con il browser che riflette il fatto che io uso un ridisegno JS e così lo controllo, ma questo è il concetto di base. Ogni pensiero / suggerimento è molto apprezzato.

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

non è necessario js in questo metodo.

puoi usare l’ background-image e nessun gradiente necessario per hide i punti.

il innerHTML di .ellipsis-placeholder non è necessario, io uso .ellipsis-placeholder per mantenere la stessa larghezza e altezza con .ellipsis-more . Potresti usare display: inline-block invece.

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

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

  • Solo CSS
  • A prova di futuro (diventa più compatibile con il tempo)
  • Non andando a rompere le parole a parte (solo rompe sugli spazi)

L’avvertenza è che non fornisce un’ellissi per i browser che non supportano la -webkit-line-clamp (attualmente IE, Edge, Firefox) ma usa una sfumatura per sbiadire 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; } } 
 

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.

la soluzione javascript sarà migliore

  • ottieni il numero di righe del testo
  • triggers la class is-ellipsis se la finestra ridimensiona o modifica l’elemento

getRowRects

Element.getClientRects() funziona in questo modo

inserisci la descrizione dell'immagine qui

ogni rects nella stessa riga ha lo stesso valore top , quindi scopri i rects con top valore top diverso, come questo

inserisci la descrizione dell'immagine qui

 function getRowRects(element) { var rects = [], clientRects = element.getClientRects(), len = clientRects.length, clientRect, top, rectsLen, rect, i; for(i=0; i 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; } 

galleggiare ...more

così

inserisci la descrizione dell'immagine qui

Rileva il ridimensionamento della finestra o l’elemento modificato

così

inserisci la descrizione dell'immagine qui

inserisci la descrizione dell'immagine qui

inserisci la descrizione dell'immagine qui

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

vedi di più clicca qui

una semplice base di metodo css 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; /**/ } 
 
text text text text text text text text text text text text text text text text text text text text text
...more

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

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