Cómo trabajar con puntos suspensivos en la tabla de respuesta bootstrap

En una tabla receptiva, text-overflow:ellipsis no funcionan cuando los datos aumentan en el th (a medida que aumenta el ancho de col-xs-2 ).

introduzca la descripción de la imagen aquí

Código abajo:

  
Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem Ipsum Firstname Lastname Age City Country
1 Anna Pitt 35 New York USA

La propiedad de desbordamiento de texto solo afecta el contenido que está desbordando un elemento contenedor de bloque en su dirección de progresión en línea MDN

Para que funcione el text-overflow de text-overflow: ellipsis , especifique text-overflow: ellipsis sí solos no servirán de nada; debe usar los siguientes estilos juntos:

 overflow: hidden; white-space: nowrap; text-overflow: ellipsis; 
 span, div, th, td { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; max-width: 100px; } 
 Inline element overflow ellipsis do not work 
Block elements overflow ellipsis works
Table - Overflow test
This is a long textThis is a long text

A partir de Bootstrap 4 puede hacer lo siguiente usando la clase .text-truncate .

  

https://getbootstrap.com/docs/4.0/utilities/text/#text-wrapping-and-overflow

Otra sugerencia para bootstrap 4:

https://gist.github.com/marcoskubis/4bf343928703824d85d0ec1b301f3a63

 .table.table-ellipsis tbody td { max-width: 100px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }