/ / ¿Cómo se envuelven los contenidos? - html, css, web

¿Cómo se envuelven los contenidos? - html, css, web

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&nbsp;LoremIspum&nbsp;LoremIspum&nbsp;LoremIspum&nbsp;LoremIspum&nbsp;LoremIspum&nbsp;LoremIspum&nbsp;LoremIspum&nbsp;LoremIspum&nbsp;LoremIspum&nbsp;LoremIspum&nbsp;LoremIspum&nbsp;LoremIspum&nbsp;LoremIspum&nbsp;LoremIspum&nbsp;LoremIspum&nbsp;LoremIspum&nbsp;LoremIspum&nbsp;LoremIspum&nbsp;LoremIspum&nbsp;LoremIspum&nbsp;LoremIspum&nbsp;LoremIspum&nbsp;LoremIspum&nbsp;LoremIspum&nbsp;LoremIspum&nbsp;LoremIspum&nbsp;LoremIspum&nbsp;LoremIspum&nbsp;LoremIspum&nbsp;LoremIspum&nbsp;LoremIspum&nbsp;LoremIspum&nbsp;LoremIspum&nbsp;LoremIspum&nbsp;LoremIspum&nbsp;LoremIspum&nbsp;LoremIspum&nbsp;LoremIspum&nbsp;LoremIspum&nbsp;
</td>
</tr>
</tbody>
</table>
</div>

Por favor, eche un vistazo aquí https://jsfiddle.net/j6hpovbo/

Diferencia entre &nbsp; y " " se explica en ¿Cuál es la diferencia entre "" y ""?

Respuestas

3 para la respuesta № 1

Transforme sus datos antes de representarlos. Una vez que lo haya obtenido de su fuente externa, simplemente realice un reemplazo de cadena para reemplazar &nbsp; 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(/&nbsp;/g, " ");
}
<table><tr><td>LoremIspum&nbsp;LoremIspum&nbsp;LoremIspum&nbsp;LoremIspum&nbsp;LoremIspum&nbsp;LoremIspum&nbsp;LoremIspum&nbsp;LoremIspum&nbsp;LoremIspum&nbsp;LoremIspum&nbsp;LoremIspum&nbsp;LoremIspum&nbsp;LoremIspum&nbsp;LoremIspum&nbsp;LoremIspum&nbsp;LoremIspum&nbsp;LoremIspum&nbsp;LoremIspum&nbsp;LoremIspum&nbsp;LoremIspum&nbsp;LoremIspum&nbsp;LoremIspum&nbsp;LoremIspum&nbsp;LoremIspum&nbsp;LoremIspum&nbsp;LoremIspum&nbsp;LoremIspum&nbsp;LoremIspum&nbsp;LoremIspum&nbsp;LoremIspum&nbsp;LoremIspum&nbsp;LoremIspum&nbsp;LoremIspum&nbsp;LoremIspum&nbsp;LoremIspum&nbsp;LoremIspum&nbsp;LoremIspum&nbsp;LoremIspum&nbsp;LoremIspum&nbsp;LoremIspum&nbsp;
</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á.