1

Tengo una tabla que al cargar texto demasiado largo se alarga demasiado la fila y se sale del contenedor del div de la tabla, eso es solo en el caso que el texto es una sola palabra sin espacios, porque con espacios si sale en varias filas. El asunto es que tengo que cargar los nombres de fotos y videos en una fila, y estos en ocasiones estan compuestos de una sola cadena de caracteres sin espacio y son muy largos, que puedo hacer para forzar que salgan en mas de una fila?

1
  • puedes colocar el html de la tabla
    – junior
    Commented el 24 sept. 2018 a las 20:47

1 respuesta 1

1

Tienes dos opciones, una colocar el div con el atributo white-space: pre-wrap el cual fuerza a hacer un salto de linea ó colocar el div aparte tambien con el overflow:auto para que le crees un scroll en dado caso que necesites colocar una altura máxima a tu div, espero te sirva.

.wrap,
.wrap2{ 
  width:100px;
  white-space: pre-wrap;      /* CSS3 */   
  white-space: -moz-pre-wrap; /* Firefox */    
  white-space: -pre-wrap;     /* Opera <7 */   
  white-space: -o-pre-wrap;   /* Opera 7 */    
  word-wrap: break-word;      /* IE */
}

.wrap{
  border:1px solid red;
  height:auto;
}

.wrap2 { 
  border:1px solid blue;
  height:100px;
  overflow: auto;
  width:100px;
}

.tabla2{
  margin-top:50px;
}
<table border="1" class="tabla">
  <tr>
    <td>
      <div class="wrap">Esta-es-una-línea-larga-de-texto-sin espacios.Esta-es-una-línea-larga-de-texto-sin espacios.-Esta-es una-línea-larga.-de-texto-sin-cualquier-espacios-Esta-es-una-línea-larga-de-texto-sin-cualquier-espacio</div>
    </td>
  </tr>
</table>

<table border="1" class="tabla2">
  <tr>
    <td>
      <div class="wrap2">Esta-es-una-línea-larga-de-texto-sin espacios.Esta-es-una-línea-larga-de-texto-sin espacios.-Esta-es una-línea-larga.-de-texto-sin-cualquier-espacios-Esta-es-una-línea-larga-de-texto-sin-cualquier-espacio</div>
    </td>
  </tr>
</table>

1
  • Si, esta solucion es la que habia encontrado, gracias. Commented el 25 sept. 2018 a las 15:35

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.