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

Deseamos brindarte la mejor solución que encontramos online. Deseamos que te sirva de ayuda y si deseas compartir algo que nos pueda ayudar a perfeccionar nuestra información hazlo libremente.

Solución:

La propiedad de desbordamiento de texto solo afecta al contenido que desborda un elemento contenedor de bloque en su dirección de progresión en línea MDN

Para text-overflow trabajar, especificando text-overflow: ellipsis por sí solo no servirá de nada; debe utilizar 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 text
This is a long text

---

Desbordamiento de texto en el diseño de la tabla

Entonces text-overflow se aplica a block elementos pero td es un table-cell elemento – las tablas son siempre complicado para tratar porque se renderizan utilizando el algoritmo de diseño de tabla predeterminado. Los anchos de la tabla y sus celdas se ajustan para adaptarse a su contenido.

1. Normalmente especificando la propiedad habitual para obtener elipsis podría funcionar:

   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
   

2. Si no funcionan o comienzas a ver el algoritmo de tabla hacer trucos contigo, entonces puedes usarlos junto con max-width: 0

   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
   max-width: 0;
   

   .table .text 
     overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;
     max-width: 0;
   

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

3. Otro cortar a tajos es envolver el texto en un span posicionado absolute dentro de td con width: 100% junto con un inline-blockpseudo elemento.

   .table .text 
     position: relative;
   
   
   .table .text span 
     overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;
     position: absolute;
     width: 100%;
   
   
   .text:before 
     content: '';
     display: inline-block;
   

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

A partir de Bootstrap 4, puede hacer lo siguiente utilizando el .text-truncate clase.

Se encuentran más detalles en https://getbootstrap.com/docs/4.0/utilities/text/#text-wrapping-and-overflow

Con Bootstrap 4, puede usar el .text-truncate clase. Agrega automáticamente estos estilos para los componentes relevantes.

.text-truncate
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

luego puede establecer el ancho máximo del elemento para obtener una salida más confiable.

Calificaciones y comentarios

No se te olvide dar recomendación a esta sección si te valió la pena.

---

---

Utiliza Nuestro Buscador