I have contenteditable span with a max-width setting that allows the user to enter text. What I'm looking to do is detect when the user reaches this width limit and a new line is displayed on the page. I am trying to create a WYSIWYG editor that creates text, (in SVG), exactly the way it looks in the contenteditable span when the user presses enter. I have successfully captured the enter event, so that is not an issue, I am looking for a way to either detect the word wrap, or calculate where it should occur. Any help is appreciated. (I can post sample code if needed)

I have contenteditable span with a max-width setting that allows the user to enter text. What I'm looking to do is detect when the user reaches this width limit and a new line is displayed on the page. I am trying to create a WYSIWYG editor that creates text, (in SVG), exactly the way it looks in the contenteditable span when the user presses enter. I have successfully captured the enter event, so that is not an issue, I am looking for a way to either detect the word wrap, or calculate where it should occur. Any help is appreciated. (I can post sample code if needed)

• javascript
• jquery
• html

2 Answers 2

When the height of the element changes, you know you have word-wrap occurring.

Monitor for a change event and see if the height changed. If it did, you have a word-wrap (or un-wrap). I threw together an example:

http://jsfiddle/eZDRD/