How to get smart word breaks in html content editable DIV

Question

So I'm working with a content editable DIV and I want to implement a smart word breaking feature like you see in most word processors, sites like Medium.com, and in the very box I'm typing this into on Stack Overflow

What I mean by smart word breaking is that if you're in the middle of typing a word and you're about to hit the end of the div then it pushes the whole word down to the next line as opposed to just breaking off the word.

Any leads on how to do this?

Thanks!

Is does that automatically I thought? http://jsbin.com/matiloze/1/edit?html,css,output — user2521439, Apr 10 '14 at 16:15
I agree with ^ that guy. It should do that automatically. http://jsfiddle.net/RXvR9/1/ — WackyWalrus, Apr 10 '14 at 16:16

score 1 · Accepted Answer · edited May 23 '17 at 12:05

What you're referring to is 'word wrapping', where the word is 'wrapped' to the next line. This is done automatically so if you're div is not doing this then you may have a problem somewhere else. The reason this happens is because a div would word wrap normally even if it were not contenteditable so it does this by default. One way it could be disabled from wordwrapping is if you have white-space: nowrap in your CSS (more info at How to turn off word wrapping in HTML?), but this seems unlikely.

How to get smart word breaks in html content editable DIV

1 Answers1