3

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)

Sébastien
  • 1,667
  • 3
  • 20
  • 31

2 Answers2

6

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.

techfoobar
  • 65,616
  • 14
  • 114
  • 135
  • I already tried to set `word-wrap` to the div but it didn't do the job. The long word is split in two word in the div while the whole word is put on a new line in the textarea. – Sébastien May 28 '12 at 14:04
  • 1
    Sorry, my mistake, I replaced spaces with " " so that they can be repeated and looks like the textarea but because of that there is no spaces to break the words. – Sébastien May 28 '12 at 14:33
0

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>
Control Freak
  • 12,965
  • 30
  • 94
  • 145