Tengo algo de contenido con
y no lo envuelve correctamente. Así que la única solución que tuve fue usar word-break: break-all
sin embargo, también divide la palabra. Supongo que
está siendo tratado como una carta? Entonces, ¿hay alguna manera de manejar
diferente de una carta para que pueda romperse pero no las palabras como tales?
table{
table-layout: fixed;
border: 1pt solid;
}
.wrapme{
white-space: wrap;
word-wrap: break-word;
word-break: break-all;
}
<div class="wrapme">
<table>
<tbody>
<tr>
<td>
LoremIspum LoremIspum LoremIspum LoremIspum LoremIspum LoremIspum LoremIspum LoremIspum LoremIspum LoremIspum LoremIspum LoremIspum LoremIspum LoremIspum LoremIspum LoremIspum LoremIspum LoremIspum LoremIspum LoremIspum LoremIspum LoremIspum LoremIspum LoremIspum LoremIspum LoremIspum LoremIspum LoremIspum LoremIspum LoremIspum LoremIspum LoremIspum LoremIspum LoremIspum LoremIspum LoremIspum LoremIspum LoremIspum LoremIspum LoremIspum
</td>
</tr>
</tbody>
</table>
</div>
Por favor, eche un vistazo aquí https://jsfiddle.net/j6hpovbo/
Diferencia entre
y " "
se explica en ¿Cuál es la diferencia entre "" y ""?
Respuestas
3 para la respuesta № 1Transforme sus datos antes de representarlos. Una vez que lo haya obtenido de su fuente externa, simplemente realice un reemplazo de cadena para reemplazar
Con un espacio real. Puede hacer esto del lado del servidor o del lado del cliente. El lado del servidor es probablemente el mejor, pero aquí hay una solución básica de JavaScript:
var tds = document.querySelectorAll("td");
for (i = 0; i < tds.length; ++i) {
tds[i].innerHTML = tds[i].innerHTML.replace(/ /g, " ");
}
<table><tr><td>LoremIspum LoremIspum LoremIspum LoremIspum LoremIspum LoremIspum LoremIspum LoremIspum LoremIspum LoremIspum LoremIspum LoremIspum LoremIspum LoremIspum LoremIspum LoremIspum LoremIspum LoremIspum LoremIspum LoremIspum LoremIspum LoremIspum LoremIspum LoremIspum LoremIspum LoremIspum LoremIspum LoremIspum LoremIspum LoremIspum LoremIspum LoremIspum LoremIspum LoremIspum LoremIspum LoremIspum LoremIspum LoremIspum LoremIspum LoremIspum
</td></tr></table>
0 para la respuesta № 2
prueba este jsfiddle: https://jsfiddle.net/j6hpovbo/2/
En esa solución no hay necesidad de proporcionar propiedades de estilo para .wrapme
clase. Al aplicar el ancho, este problema se resolverá.