在文本框中以文本相同的方式包装文本 [英] Wrapping the text the same way in a div as in a textarea

问题描述

我正在创建一个建议面板，同时实时编辑HTML textarea。为了得到{x，y}坐标，我使用了一个放在textarea后面的隐藏div。我得到了carret的位置，然后在carret加上span标记之前将文本复制到隐藏的div上。然后我得到跨度坐标并将它提供给建议面板。

唯一的问题是，当我向textarea添加一个没有空格的长行时，行正在当它在div面板中被剪切时（因此建议面板不能很好地放置，直到我添加回车符）。

有没有一种方法可以将文本同样的方式在这两个地方（textarea和div面板）？

（我正在使用jQuery）

解决方案

给你的DIV的 word-wrap：break-word 样式强制自动换行并让你的DIV处理像你的长文本文本框不会。

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)

解决方案

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.

这篇关于在文本框中以文本相同的方式包装文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！