desbordamiento de texto: puntos suspensivos no funcionan

Esto es lo que probé (ver aquí ):

body {
    overflow: hidden;
}

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

Esencialmente, quiero que el lapso se reduzca con puntos suspensivos cuando la ventana se hace pequeña. ¿Qué hice mal?

Necesita tener CSS overflow, width(o max-width) display, y 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
}

Anexo Si desea obtener una descripción general de las técnicas para sujetar la línea (elipses de desbordamiento multilínea), consulte esta página de CSS-Tricks: https://css-tricks.com/line-clampin/

Anexo 2 (mayo de 2019)
Como se afirma en este enlace , Firefox 68 admitirá -webkit-line-clamp(!)

Asegúrese de tener un elemento de bloque, un tamaño máximo y establecer el desbordamiento en oculto. (Probado en IE9 y FF 7)

http://jsfiddle.net/uh9zD/

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

Para el uso de varias líneas en Chrome:

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 en youtube ;-)

Estaba teniendo un problema con los puntos suspensivos en Chrome. Activando el espacio en blanco: nowrap parecía arreglarlo.

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;

esto y solo esto hizo el trabajo para mí por un

<pre> </pre> 

etiqueta

todo lo demás no pudo hacer los puntos suspensivos ...

Solo un aviso para cualquiera que pueda tropezar con esto ... Mi H2 estaba heredando

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

que no permitía puntos suspensivos. Al parecer esto es muy finickey eh?

Agregue este código debajo de donde le gusta

ejemplo

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 múltiples líneas

En Chrome, puede aplicar este CSS si necesita aplicar puntos suspensivos en varias líneas.

También puede agregar ancho en su CSS para especificar el elemento de cierto ancho:

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

Puede intentar usar puntos suspensivos agregando lo siguiente en CSS:

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

Pero parece que este código solo se aplica al recorte de una línea. Se pueden encontrar más formas de recortar texto y mostrar puntos suspensivos en este sitio web: http://blog.sanuker.com/?p=631

Agregue las siguientes líneas en CSS para que los puntos suspensivos funcionen

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

Para aquellos de nosotros que no queremos usar ancho fijo , también funciona usando display: inline-grid. Entonces, junto con las propiedades requeridas, solo agregadisplay

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