HTML CSS Cómo evitar que una celda de tabla se expanda

Luego de investigar en diversos repositorios y páginas de internet al terminar hemos dado con la resolución que te compartimos ahora.

Solución:

Parece que su sintaxis HTML es incorrecta para la celda de la tabla. Antes de probar la otra idea a continuación, confirme si esto funciona o no… También puede intentar agregar esto a su tabla: table-layout:fixed.. .

   [content]

HTML nuevo

   

       [content]
   

Clase CSS:

.MyClass
   height: 280px; 
   width: 456px; 
   overflow: hidden;
   white-space: nowrap;

  
  
  
  

    
First Column
    
Second Column
    
Third Column
  
  

    
Row 1
    
Text
    
1
  
  

    
Row 2
    
Abcdefg
    
123
  
  

    
Row 3
    
Abcdefghijklmnop
    
123456
  

Sé que es de la vieja escuela, pero pruébalo, funciona.

También puede querer agregar esto:

Por supuesto, pondrías esto en una hoja de estilo vinculada por separado, y no en línea… ¿no?;)

Sin javascript, solo CSS. ¡Funciona bien!

   .no-break-out 
      /* These are technically the same, but use both */
      overflow-wrap: break-word;
      word-wrap: break-word;

      -ms-word-break: break-all;
      /* This is the dangerous one in WebKit, as it breaks things wherever */
      word-break: break-all;
      /* Instead use this non-standard one: */
      word-break: break-word;

      /* Adds a hyphen where the word breaks, if supported (No Blink) */
      -ms-hyphens: auto;
      -moz-hyphens: auto;
      -webkit-hyphens: auto;
      hyphens: auto;

    

Reseñas y valoraciones de la guía

Acuérdate de que tienes la capacidad de valorar este tutorial si atinaste tu contrariedad a tiempo.

---

---

Utiliza Nuestro Buscador