All geek questions in one place

Wrap text in the same way in a div, as in a text field

I create a suggestion panel when editing an HTML text box. To get the coordinates {x, y}, I use a hidden div located behind the text box. I get the carret position and then copy the text in front of the carret plus the span label to the hidden div. Then I get the coordinates of the range and pass it to the suggestion bar.

The only problem is that when I add a long line without spaces in the text box, the line is wrapped when it is cut in the div panel (so the suggestion panel no longer fits until I add a carriage return).

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

(I am using jQuery)

+2
source share
2 answers

Providing the word-wrap:break-word style for your DIV will word-wrap:break-word words and make your DIV a long text, just like your text field does.

+5
source

Add overflow:auto or overflow:scroll and width: / height: to your css div , this will give you a scrollbar that will wrap the text and look like a text box, well, without a border. You can give it a border style so that it looks more like a text box.

Like this:

  <div style="overflow:auto;width:150px;height:50px;border:1px solid #CCC;"> Your text goes here </div>
0
source

Source: https://habr.com/ru/post/902539/

More articles:


All Articles