estouro de texto: reticências não estão funcionando

Isto é o que eu tentei (veja aqui ):

body {
    overflow: hidden;
}

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

Essencialmente, quero que a extensão encolha com reticências quando a janela for pequena. O que eu fiz errado?

Você precisa ter CSS overflow, width(ou 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
}

Adendo Se você deseja obter uma visão geral das técnicas para fixação de linhas (reticências com várias linhas), consulte esta página de CSS-Tricks: https://css-tricks.com/line-clampin/

Adendo2 (maio de 2019)
Como este link afirma, o Firefox 68 suportará -webkit-line-clamp(!)

Verifique se você tem um elemento de bloco, um tamanho máximo e defina overflow como oculto. (Testado no IE9 e FF 7)

http://jsfiddle.net/uh9zD/

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

Para várias linhas no Chrome, use:

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

Inspirado no youtube ;-)

Eu estava tendo um problema com reticências no chrome. Ativando o espaço em branco: o nowrap parecia corrigi-lo.

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;

isso e só isso fez o trabalho para mim por um

<pre> </pre> 

tag

tudo o resto não conseguiu fazer as reticências ....

Apenas um alerta para quem pode tropeçar nisso ... Meu h2 estava herdando

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

o que não permitia reticências. Aparentemente, isso é muito bom né?

Adicione este código abaixo para onde você gosta

exemplo

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

Para várias linhas

No chrome, você pode aplicar esse css se precisar aplicar reticências em várias linhas.

Você também pode adicionar largura no seu css para especificar o elemento de certa largura:

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

Você pode tentar usar reticências adicionando o seguinte no CSS:

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

Mas parece que esse código se aplica apenas ao corte de uma linha. Mais formas de aparar texto e mostrar reticências podem ser encontradas neste site: http://blog.sanuker.com/?p=631

Adicione as seguintes linhas no CSS para que as reticências funcionem

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

Para aqueles de nós que não querem usar largura fixa , também funciona usando display: inline-grid. Então, juntamente com as propriedades necessárias, você apenas adicionadisplay

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