Forzar texto en 2 lineas en fila de una tabla

publicado por: Anonymous

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?

solución

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.

_x000D_

_x000D_

.wrap,_x000D_
.wrap2{ _x000D_
  width:100px;_x000D_
  white-space: pre-wrap;      /* CSS3 */   _x000D_
  white-space: -moz-pre-wrap; /* Firefox */    _x000D_
  white-space: -pre-wrap;     /* Opera <7 */   _x000D_
  white-space: -o-pre-wrap;   /* Opera 7 */    _x000D_
  word-wrap: break-word;      /* IE */_x000D_
}_x000D_
_x000D_
.wrap{_x000D_
  border:1px solid red;_x000D_
  height:auto;_x000D_
}_x000D_
_x000D_
.wrap2 { _x000D_
  border:1px solid blue;_x000D_
  height:100px;_x000D_
  overflow: auto;_x000D_
  width:100px;_x000D_
}_x000D_
_x000D_
.tabla2{_x000D_
  margin-top:50px;_x000D_
}

_x000D_

<table border="1" class="tabla">_x000D_
  <tr>_x000D_
    <td>_x000D_
      <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>_x000D_
    </td>_x000D_
  </tr>_x000D_
</table>_x000D_
_x000D_
<table border="1" class="tabla2">_x000D_
  <tr>_x000D_
    <td>_x000D_
      <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>_x000D_
    </td>_x000D_
  </tr>_x000D_
</table>

_x000D_

_x000D_

_x000D_

Respondido por: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *