在div中像在文本区域中一样包装文本

Question

I'm creating a suggestion panel while live editing an HTML textarea. To get the {x,y} coordinates I use an hidden div placed behind the textarea. I get the carret position and then copy the text before the carret plus a span tag to the hidden div. Then I get the span coordinates and give it to the suggestion panel.

The only problem is that when I add a long line without spaces to the textarea, the line is being wrapped while it's cut in the div panel (so the suggestion panel is not well placed anymore until I add a carriage return).

Is there a way to fit the text the same way in these two places (textarea and div panel) ?

(i'm using jQuery)

Answer 1

为DIV提供自动word-wrap:break-word的样式将强制自动换行，并使DIV像文本框一样处理长文本。

Answer 2

Add overflow:auto or overflow:scroll and a width: / height: to your div 's css, this will give you a scroll bar that will wrap the text and look like a textarea, well without a border. You can give it a border style as well to make it appear more like a textarea.

Like this:

 <div style="overflow:auto;width:150px;height:50px;border:1px solid #CCC;">

    Your text goes here

 </div>