Wrapping the text the same way in a div as in a textarea

问题

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)

回答1:

Giving a style of word-wrap:break-word for your DIV will force word wrap and make your DIV treat long text like your textbox does.

回答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>

来源：https://stackoverflow.com/questions/10785804/wrapping-the-text-the-same-way-in-a-div-as-in-a-textarea