Prevent horizontal scroll and expand vertically using CSS

Question

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">:&nbsp;</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>

Add below css on last td. word-break: break-word;

Hiren Davda
– Hiren Davda

2022-03-29 13:20:19 +00:00
Commented Mar 29, 2022 at 13:20 — Hiren Davda
– Hiren Davda, Commented Mar 29, 2022 at 13:20

Abhijeet Vadera · Accepted Answer · 2022-03-29 13:42:58Z

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">:&nbsp;</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>

Collectives™ on Stack Overflow

Prevent horizontal scroll and expand vertically using CSS

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related