Tengo un caso de uso de información sobre herramientas donde el usuario debería poder desplazarse verticalmente y el texto debería ajustarse automáticamente cuando exceda el ancho. He usado overflow-wrap pero el desplazamiento se habilita horizontalmente en lugar de que el texto se mueva a la siguiente línea.
¿Cómo puedo conseguir esto? A continuación se muestra una muestra de lo que está sucediendo.
.tooltip { max-width: 100px; max-height: 100px; text-align: justify-all; overflow-wrap: break-word; overflow-y: scroll; font-family: "Open Sans", Arial, Helvetica, sans-serif; font-size: 11px; -ms-overflow-style: none; } .tooltip::-webkit-scrollbar { display: none; } <div class="tooltip"> <span> <table> <tbody> <tr> <td valign="top">Heading</td> <td valign="top">: </td> <td valign="top">This is a very big text to show that scroll is enabled Horizontally even if overflow-x is not scroll. This is a random sentence to to entend the text even further...................</td> </tr> </tbody> </table> </span> </div>Necesito desglosar las palabras usando word-break: break-word css.
.tooltip { max-width: 100px; max-height: 100px; text-align: justify-all; overflow-wrap: break-word; overflow-y: scroll; font-family: "Open Sans", Arial, Helvetica, sans-serif; font-size: 11px; -ms-overflow-style: none; } .tooltip::-webkit-scrollbar { display: none; } .word-break { word-break: break-word; } <div class="tooltip"> <span> <table> <tbody> <tr> <td valign="top">Heading</td> <td valign="top">: </td> <td valign="top" class="word-break">This is a very big text to show that scroll is enabled Horizontally even if overflow-x is not scroll. This is a random sentence to to entend the text even further...................</td> </tr> </tbody> </table> </span> </div>