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 respuesta
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>
-
Si, esta solucion es la que habia encontrado, gracias. Commented el 25 sept. 2018 a las 15:35