I have a use-case of tooltip where user should be able to scroll vertically and text should be automatically wrapped when exceeds width. I have used overflow-wrap but, scroll is getting enabled horizontally instead of text getting moved to next line.
How can I achieve this? Below is sample of what is happening.
.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>Need to break down the words using 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>