css - suspensivos - Tablas Bootstrap desbordadas con texto largo sin espacios

tablas en html ejemplos

Question

Estoy usando Bootstrap y tengo una tabla con algunas columnas, la última de las cuales a veces tiene un texto largo sin espacios. Noté que bajo ciertos tamaños de pantalla, la tabla se desbordaba de su div principal y creaba una superposición fea con su tabla de hermanos.

Jugué con eso y creo que el problema tiene que ver con que el texto no esté espaciado. jsfiddle un jsfiddle que demuestra lo que quiero decir.

Como puede ver, la tabla superior izquierda se comporta bien y simplemente crece verticalmente para acomodar más texto. Sin embargo, la tabla inferior izquierda conduce a un desbordamiento a la derecha debido al texto largo sin espacios y la columna derecha de la tabla inferior izquierda termina "debajo" de su hermano.

¿Alguien tiene alguna sugerencia sobre cómo puedo solucionar esto para que el texto muy largo quede recortado o parcialmente dividido en una nueva línea?

Answer 1

Agregue los siguientes estilos a su <table>

.the-table {
    table-layout: fixed;
    word-wrap: break-word;
}

Luego puede ajustar su diseño a través de CSS como lo desee.

Answer 2

Estaba teniendo problemas con estas soluciones que funcionan en Internet Explorer.

Usé el siguiente estilo para que finalmente funcione.

<td style="word-break: break-all">

Answer 3

Esto funciona sin forzar el diseño de la tabla para ser arreglado Solo agréguela a td o cualquier

.is-breakable {
  word-break: break-word;
}

Answer 4

Puedes usar debajo de css. Esto ajustará el texto y lo aplicará ... al final del texto.

por ejemplo, This_is_a_large_text se cambiará a This_is_a_lar ...

td {
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

También puede agregar información sobre herramientas para mostrar el valor completo del texto.

<td data-toggle="tooltip" title="${text}">${text}</td>