Solución:
Mozilla Firefox solución
Agregar:
display: inline-block;
al estilo de tu td.
Navegadores basados en Webkit (Google Chrome, Safari, …) solución
Agregar:
display: inline-block;
word-break: break-word;
al estilo de tu td.
Nota:
Tenga en cuenta que, como por ahora, break-word no forma parte de la especificación estándar de webkit; por lo tanto, es posible que le interese emplear el break-all en lugar de. Este valor alternativo proporciona una solución indudablemente drástica; sin embargo, cumple con el estándar.
Ópera solución
Agregar:
display: inline-block;
word-break: break-word;
al estilo de tu td.
El párrafo anterior se aplica a Opera de manera similar.
Use este código (tomado de css-tricks) que funcionará en todos los navegadores
overflow-wrap: break-word;
word-wrap: break-word;
-ms-word-break: break-all;
/* This is the dangerous one in WebKit, as it breaks things wherever */
word-break: break-all;
/* Instead use this non-standard one: */
word-break: break-word;
/* Adds a hyphen where the word breaks, if supported (No Blink) */
-ms-hyphens: auto;
-moz-hyphens: auto;
-webkit-hyphens: auto;
hyphens: auto;
Work-Break no tiene nada que ver con inline-block.
Asegúrate de especificar width y observe si hay atributos primordiales en los nodos principales. Asegúrate de que no haya white-space: nowrap.
ver este codepen
<html>
<head>
</head>
<body>
<style scoped>
.parent {
width: 100vw;
}
p {
border: 1px dashed black;
padding: 1em;
font-size: calc(0.6vw + 0.6em);
direction: ltr;
width: 30vw;
margin:auto;
text-align:justify;
word-break: break-word;
white-space: pre-line;
overflow-wrap: break-word;
-ms-word-break: break-word;
word-break: break-word;
-ms-hyphens: auto;
-moz-hyphens: auto;
-webkit-hyphens: auto;
hyphens: auto;
}
}
</style>
<div class="parent">
<p>
Note: Mind that, as for now, break-word is not part of the standard specification for webkit; therefore, you might be interested in employing the break-all instead. This alternative value provides a undoubtedly drastic solution; however, it conforms to
the standard.
</p>
</div>
</body>
</html>¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)