ellissi css sulla seconda riga

CSS text-overflow: ellipsissulla seconda riga, è possibile? Non riesco a trovarlo in rete.

esempio:

quello che voglio è così:

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

ma quello che sta succedendo è questo:

I hope someone could help me. I ... 

Un requisito per text-overflow: ellipsis;funzionare è una versione di una riga di white-space( pre, nowrapecc.). Ciò significa che il testo non raggiungerà mai la seconda riga.

Quindi. Non possibile in CSS puro.

La mia fonte quando stavo cercando esattamente la stessa cosa proprio ora: http://www.quirksmode.org/css/textoverflow.html (Quirksmode ftw!)

MODIFICA Se i buoni dei CSS implementeranno http://www.w3.org/TR/css-overflow-3/#max-lines , possiamo farlo in CSS puro usando fragments(nuovo) e max-lines(nuovo). Altre informazioni su http://css-tricks.com/line-clampin/

EDIT 2 WebKit / Blink ha line-clamp: -webkit-line-clamp: 2metterà i puntini di sospensione sulla seconda riga.

Questo dovrebbe funzionare nei browser webkit :

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

Come altri hanno già risposto, non esiste una soluzione CSS pura. C'è un plugin jQuery che è molto facile da usare, si chiama dotdotdot . Utilizza la larghezza e l'altezza del contenitore per calcolare se deve troncare e aggiungere i puntini di sospensione.

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

Ecco un jsFiddle .

Ho scoperto che la risposta di Skeep non era abbastanza e aveva bisogno anche di uno overflowstile:

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

se qualcuno sta usando SASS / SCSS e si imbatte in questa domanda - forse questo mixin potrebbe essere di aiuto:

@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');
}

questo aggiunge solo i puntini di sospensione nei browser webkit. il resto lo interrompe.

Basta usare il line-clamp per i browser che lo supportano (la maggior parte dei browser moderni) e tornare a 1 riga per i più vecchi.

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

Che peccato non riuscire a farlo funzionare su due righe! Sarebbe fantastico se l'elemento fosse un blocco di visualizzazione e avesse un'altezza impostata su 2em o qualcosa del genere, e quando il testo traboccasse mostrerebbe un'ellissi!

Per un singolo liner puoi usare:

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

Per più righe forse potresti usare un Polyfill come jQuery autoellipsis che è su github http://pvdspek.github.com/jquery.autoellipsis/

Non sono un professionista JS, ma ho capito un paio di modi in cui potresti farlo.

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>

Quindi con jQuery lo tronchi fino a un determinato conteggio dei caratteri ma lasci l'ultima parola in questo modo:

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

Il risultato è simile al seguente:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi
elementum consequat tortor et ...

Oppure puoi semplicemente troncarlo fino a un determinato conteggio dei personaggi in questo modo:

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

Il risultato è simile al seguente:

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

Spero che ti aiuti un po '.

Ecco il jsFiddle .

ecco un buon esempio in puro css.

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

Ho già usato il plugin jQuery-condense prima, che sembra che possa fare quello che vuoi. In caso contrario, ci sono diversi plugin che potrebbero soddisfare le tue esigenze.

Modifica: ti ho reso una demo - nota che ho collegato jquery.condense.js alla demo che fa la magia, quindi pieno merito all'autore di quel plugin :)

È un CSS non standard, che non è coperto nella versione corrente di CSS (Firefox non lo supporta). Prova invece a utilizzare JavaScript.

Modo css puro per tagliare il testo multilinea con i puntini di sospensione

Regola l'altezza del contenitore di testo, la linea di controllo deve essere interrotta da -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;
}

Ho già riscontrato questo problema e non esiste una soluzione CSS pura

Ecco perché ho sviluppato una piccola biblioteca per affrontare questo problema (tra gli altri). La libreria fornisce oggetti per modellare ed eseguire il rendering di testo a livello di lettera. Ad esempio, puoi emulare un overflow del testo: puntini di sospensione con un limite arbitrario (non è necessaria una riga)

Maggiori informazioni su http://www.samuelrossille.com/home/jstext.html per screenshot, tutorial e link per il download.

Se qualcuno sta cercando di far funzionare il morsetto di linea nel flexbox , è un po 'più complicato, soprattutto quando si esegue il test di tortura con parole molto lunghe. Le uniche differenze reali in questo frammento di codice sono min-width: 0;nell'elemento flessibile contenente testo troncato e word-wrap: break-word;. Un suggerimento su https://css-tricks.com/flexbox-truncated-text/ per approfondimenti. Disclaimer: questo è ancora webkit solo per quanto ne so.

.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 (versione codepen)

Tutte le risposte qui sono sbagliate, mancano pezzi importanti, l'altezza

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

un metodo CSS puro basato su -webkit-line-clamp, che funziona su 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>

Nessun vero modo semplice per farlo. Utilizzare la libreria Clamp.js .

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

Ho trovato una soluzione, tuttavia è necessario conoscere una lunghezza approssimativa dei caratteri che si adatterà alla propria area di testo, quindi unire un ... allo spazio precedente.

Il modo in cui l'ho fatto è di:

1. assumere una lunghezza di carattere approssimativa (in questo caso 200) e passare a una funzione insieme al testo
2. dividere gli spazi in modo da avere una stringa lunga
3. usa jQuery per dividere il primo "" spazio dopo la lunghezza del tuo personaggio
4. unisciti ai rimanenti ...

codice :

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

ecco un violino - http://jsfiddle.net/GYsW6/1/