0

I am using an editor on my page and the word wrapping works fine if they are actually words. Meaning there is a space after every few characters.

However, if I put my finger on a letter and keep pressing, then the editor will expand beyond the edge of the display.

So I believe the following does the word wrapping showing an scrollbar if necessary:

<div style="overflow:scroll;">

But that won't work for the above scenario. Do I need a different attribute? What am I doing wrong? Thank you.

Rob
  • 14,746
  • 28
  • 47
  • 65
Stackedup
  • 680
  • 2
  • 9
  • 26

1 Answers1

2

I believe what you are looking for is the word-wrap attribute, specifically break-word, which allows a long word to be broken into sections to allow for wrapping. Try the following:

    div {
      overflow-wrap: break-word; // standard
      word-wrap: break-word; // older, but still needed in IE
    }
<div>
ssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss
</div>

You may also find some helpful information in this post and this post.

Claire
  • 3,146
  • 6
  • 22
  • 37
  • Thank you so much for your reply. That didn't work but it lead me to the following: -ms-word-break: break-all; word-break: break-all; word-break: break-word; which works. Does this have any side effects? – Stackedup Aug 03 '19 at 03:41
  • 1
    @Stackedup Not so much "side effects" as just different levels of support in different browsers. That's why you need the different declarations. `break-all` can be dangerous as it basically just breaks wherever it wants, sometimes not-so-intuitively. – Claire Aug 03 '19 at 03:57
  • 1
    @Stackedup check the answer for some further reading on the matter. – Claire Aug 03 '19 at 03:57