overflow del testo: i puntini di sospensione non funzionano

Questo è quello che ho provato (vedi qui ):

body {
    overflow: hidden;
}

span {
    border: solid 2px blue;
    white-space: nowrap;
    text-overflow: ellipsis;
}

In sostanza, voglio che la luce si riduca con i puntini di sospensione quando la finestra viene ridotta. Cos'ho fatto di sbagliato?

Devi avere CSS overflow, width(o max-width) display, e white-space.

http://jsfiddle.net/HerrSerker/kaJ3L/1/

span {
    border: solid 2px blue;
    white-space: nowrap;
    text-overflow: ellipsis;
    width: 100px;
    display: block;
    overflow: hidden
}

Addendum Se si desidera una panoramica delle tecniche per eseguire il clamping della linea (Ellissi di overflow multilinea), consultare questa pagina Trucchi CSS: https://css-tricks.com/line-clampin/

Addendum2 (maggio 2019)
Come afferma questo link , Firefox 68 supporterà -webkit-line-clamp(!)

Assicurati di avere un elemento a blocchi, una dimensione massima e imposta l'overflow su nascosto. (Testato in IE9 e FF 7)

http://jsfiddle.net/uh9zD/

div {
    border: solid 2px blue;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 50px;
}

Per le linee multiple in Chrome utilizzare:

display: inline-block;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2; // max nb lines to show
-webkit-box-orient: vertical;

Ispirato da YouTube ;-)

Stavo avendo un problema con i puntini di sospensione sotto cromo. Attivare lo spazio bianco: nowrap sembrava risolverlo.

max-width: 95px;
max-height: 20px;
overflow: hidden;
display: inline-block;
text-overflow: ellipsis;
border: solid 1px black;
font-size: 12pt;
text-align: right;
white-space: nowrap;

word-wrap: break-word;

questo e solo questo ha fatto il lavoro per me per a

<pre> </pre> 

etichetta

tutto il resto non è riuscito a fare i puntini di sospensione ....

Solo un avvertimento per chiunque possa imbattersi in questo ... Il mio h2 stava ereditando

text-rendering: optimizelegibility; 
//Changed to text-rendering: none; for fix

che non consentiva i puntini di sospensione. Apparentemente questo è molto finickey eh?

Aggiungi questo codice qui sotto per dove ti piace

esempio

p{
   display: block; /* Fallback for non-webkit */
   display: -webkit-box;
   max-width: 400px;
   margin: 0 auto;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
   overflow: hidden;
   text-overflow: ellipsis;
 }

Per più righe

In Chrome, è possibile applicare questo CSS se è necessario applicare i puntini di sospensione su più linee.

Puoi anche aggiungere larghezza nel tuo CSS per specificare l'elemento di una certa larghezza:

.multi-line-ellipsis {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

<p class="multi-line-ellipsis">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

Puoi provare a usare i puntini di sospensione aggiungendo quanto segue nei CSS:

.truncate {
  width: 250px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

Ma sembra che questo codice si applichi solo al trim di una riga. Altri modi per tagliare il testo e mostrare i puntini di sospensione sono disponibili in questo sito Web: http://blog.sanuker.com/?p=631

Aggiungi le seguenti righe nel CSS per far funzionare i puntini di sospensione

 p {
     display: block; // change it as per your requirement
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
   }

Per quelli di noi che non vogliono usare la larghezza fissa , funziona anche usando display: inline-grid. Quindi insieme alle proprietà richieste devi solo aggiungeredisplay

span {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    display: inline-grid;
}