Limita la lunghezza del testo a n righe usando CSS


515

È possibile limitare una lunghezza del testo a "n" righe usando CSS (o tagliarlo quando trabocca verticalmente).

text-overflow: ellipsis; funziona solo per 1 riga di testo.

testo originale:

Ultrices natoque mus mattis, aliquam, cras in pellentesque
tincidunt elit purus lectus, vel ut aliquet, elementum nunc
nunc rhoncus placerat urna! Sit est sed! Ut penatibus turpis
mus tincidunt! Dapibus sed aenean, magna sagittis, lorem velit

output desiderato (2 righe):

Ultrices natoque mus mattis, aliquam, cras in pellinque
tincidunt elit purus lectus, vel ut aliquet, elementum ...


1
Solo una nota: i puntini di sospensione dell'overflow del testo non sono supportati su Firefox, vedi bugzilla.mozilla.org/show_bug.cgi?id=312156
Joril,

8
sembra che qualcuno sia scappato facendolo con solo css mobify.com/dev/multiline-ellipsis-in-pure-css
Gaurav Shah

non funziona su IE10. Funziona l'11.
user2060451

@GauravShah Grazie. Funziona anche su IE10. La maggior parte delle soluzioni qui non sono cross-browser.
user2060451

Risposte:


655

C'è un modo per farlo usando la sintassi non ufficiale del line-clamp e, a partire da Firefox 68, funziona in tutti i principali browser.

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>

A meno che non vi preoccupate per gli utenti di IE, non c'è bisogno di fare line-heighte max-heightfallback.


3
per esempio, con una certa dimensione del carattere all'altezza della linea, puoi vedere parte della riga successiva anche con l'allineamento del testo: giustificare, i puntini di sospensione non si trovano alla fine dell'ultima riga, ma si sovrappongono al testo nella posizione, esso lo sarebbe, se il testo fosse allineato a sinistra
Matus,

3
ecco il violino: jsfiddle.net/csYjC/1122 mentre lo stavo preparando, ho scoperto, che parte dell'ultima riga è visibile solo quando c'è imbottitura
Matus,

Bene, nessuno ha detto che questa magia nera non solo per webkit funzionerà perfettamente tutto il tempo. Puoi usare il riempimento su qualche altro contenitore, forse genitore,. Il testo a capo nel tag <p> ha perfettamente senso: jsfiddle.net/csYjC/1129
Evgeny

2
Si noti che, a partire da questo commento, -webkit-line-clamp non rispetta la visibilità: nascosto. Questo mi è costato alcune ore di debug. Ecco una segnalazione bug a supporto: bugs.webkit.org/show_bug.cgi?id=45399 .
Kevin,

3
Se hai problemi con l' -webkit-box-orient: vertical;essere nascosto durante la compilazione di scss, prova questo /* autoprefixer: ignore next */ -webkit-box-orient: vertical;
Salam

110

Quello che puoi fare è il seguente:

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

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


13

Sembra essere la migliore soluzione possibile anche per me, ma come notato da @rishiAgar non termina con i puntini di sospensione. Continua a funzionare come una clip.
David Carrigan,

Credo che dovrai aggiungere gli attributi display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;per far apparire i puntini di sospensione. Ma questo funzionerà solo in Chrome. Per soluzioni che funzionano anche su Firefox, guarda qui: stackoverflow.com/a/20595073/1884158 Ed ecco un utile tutorial sull'argomento: css-tricks.com/line-clampin
modulitos

34

Soluzione cross-browser funzionante

Questo problema ci affligge da anni.

Per aiutare in tutti i casi, ho presentato l'approccio CSS only e un approccio jQuery nel caso in cui le avvertenze CSS siano un problema.

Ecco una sola soluzione CSS che mi è venuta in mente che funziona in tutte le circostanze, con alcune avvertenze minori.

Le basi sono semplici, nasconde il trabocco della campata e imposta l'altezza massima in base all'altezza della linea come suggerito da Eugene Xa.

Quindi c'è una pseudo classe dopo il div contenente che posiziona bene i puntini di sospensione.

Avvertenze

Questa soluzione posizionerà sempre i puntini di sospensione, indipendentemente se ce n'è bisogno.

Se l'ultima riga termina con una frase finale, finirai con quattro punti ....

Dovrai essere soddisfatto dell'allineamento del testo giustificato.

I puntini di sospensione saranno alla destra del testo, che può apparire sciatto.

Codice + Snippet

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>

Approccio jQuery

Secondo me questa è la soluzione migliore, ma non tutti possono usare JS. Fondamentalmente, jQuery controllerà qualsiasi elemento .text, e se ci sono più caratteri rispetto al massimo var preimpostato, taglierà il resto e aggiungerà un puntino di sospensione.

Non ci sono avvertenze su questo approccio, tuttavia questo esempio di codice ha lo scopo solo di dimostrare l'idea di base - non la userei in produzione senza migliorarla per due motivi:

1) Riscriverà l'html interno di .text elems. se necessario o no. 2) Non fa alcun test per verificare che l'html interno non abbia elem nidificati, quindi ti affidi molto all'autore per usare correttamente .text.

Modificato

Grazie per la cattura @markzzz

Codice e frammento

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


3
La tua soluzione CSS non è così buona, per quanto riguarda il caso in cui il testo non sia troppo pieno? mostra anche "..." ...
user5260143

Ma anche la versione jQuery aggiunge punti se il testo è più corto: jsfiddle.net/o82opadm/35
markzzz,

@markzzz - grazie per quello, non ho idea di come mi sia perso :-) L'ho rivisto ora, ma non è qualcosa che userei in produzione senza un po 'più di lavoro. Ma almeno l'idea di base è presentata.
asimov è stato il

1
Ho scoperto che la soluzione solo CSS sembra funzionare bene, ma solo se si utilizzano solo misurazioni di pixel. EM e percentuali mi hanno messo nei guai. E ho aggiunto i puntini di sospensione come <a> in stile nella posizione: assoluto in basso a destra per coloro che vogliono fare clic sul collegamento e leggere di più. Nel mio caso sapevo che il testo sarebbe sempre traboccato, quindi jQuery non era necessario. Grazie per l'utile soluzione CSS!
Mentalista,

30

Per quanto posso vedere, questo sarebbe possibile solo usando height: (some em value); overflow: hiddene anche allora non avrebbe avuto la fantasia ...alla fine.

Se questa non è un'opzione, penso che sia impossibile senza qualche pre-elaborazione lato server (difficile perché il flusso di testo è impossibile da prevedere in modo affidabile) o jQuery (possibile ma probabilmente complicato).


16
Questo sembra funzionare per qualsiasi dimensione del carattere .mytext {overflow: hidden; altezza della linea: 1,2em; altezza massima: 2.4em; }
Peter,

1
@Pedro sì. Potresti essere in grado di eseguire ciascuno di essi .mytextutilizzando jQuery, scoprire se ha più contenuto di quanto sia visibile e aggiungere ...manualmente. In questo modo, sei compatibile con i clienti senza JS e i clienti con JS possono avere la decorazione. Forse vale la pena fare una domanda separata a cui rispondere un jQuery Guru; potrebbe essere possibile farlo relativamente facilmente
Pekka,


10

seguire la lezione CSS mi ha aiutato a ottenere due puntini di sospensione.

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

5

Attualmente non puoi, ma in futuro sarai in grado di utilizzare text-overflow:ellipis-lastline. Attualmente è disponibile con il prefisso del fornitore in Opera 10.60+: esempio


5
Ciò non funziona per le stringhe multilinea, poiché richiede anche l'impostazione di white-scace: nowrap. Vedi qui .
Sebastian Noack,

4

Ho una soluzione che funziona bene ma invece un'ellissi utilizza un gradiente. Funziona quando hai un testo dinamico, quindi non sai se sarà abbastanza lungo da richiedere un'ellisse. I vantaggi sono che non è necessario eseguire calcoli JavaScript e funziona con contenitori a larghezza variabile, comprese le celle di tabella, ed è cross-browser. Utilizza un paio di div extra, ma è molto facile da implementare.

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

post del blog: http://salzerdesign.com/blog/?p=453

pagina di esempio: http://salzerdesign.com/test/fade.html


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

0

Mi piace molto il line-clamp, ma ancora nessun supporto per Firefox ... quindi vado con un calcolo matematico e nascondo l'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*/
}

ora diciamo che vuoi rimuovere e aggiungere questa classe tramite jQuery con un link, dovrai avere un pixel in più quindi l'altezza massima sarà di 63 px, questo perché devi controllare ogni volta se l'altezza è maggiore di 62px, ma nel caso di 4 righe otterrai un falso vero, quindi un pixel in più lo risolverà e non creerà alcun problema aggiuntivo

incollerò un coffeescript solo per fare un esempio, usa un paio di collegamenti che sono nascosti per impostazione predefinita, con le classi read-more e read-less, rimuoverà quelle che l'overflow non è necessaria e rimuoverà il corpo classi di 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()

a proposito, non aggiungere un line-clamp a questo, imposterà l'altezza a 62px (per questo caso) e non avrai il jacquery comprabation
Alexis

0

Se vuoi concentrarti su ciascuno letterdi essi puoi fare così, mi riferisco a questa domanda

Se vuoi concentrarti su ciascuno worddi essi puoi fare così + spazio

Se vuoi concentrarti su ognuno worddi essi puoi fare così + senza spazio


-1

Esempio di codice di base, imparare a programmare è facile. Controlla i commenti CSS di stile.

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>


4
L'OP sta cercando una soluzione a più linee. Funziona solo su singole righe di testo.
Asimov era il

-11

Mi sono cercato in giro per questo, ma poi mi rendo conto, accidenti il ​​mio sito web usa php !!! Perché non usare la funzione di taglio sull'inserimento del testo e giocare con la lunghezza massima ...

Ecco una possibile soluzione anche per coloro che usano 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;
?>

18
Non è possibile utilizzare in modo sicuro l'elaborazione lato server perché non è possibile sapere in anticipo quanto spazio occuperà il testo nella pagina. Dipende dalle dimensioni del carattere, dalle impostazioni della dimensione del testo del browser, dal livello di zoom del browser, ecc.
ermannob,
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.