在文本区中以div的形式包装文本

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

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

有没有办法在这两个地方（textarea和div面板）以相同的方式调整文本？

（我使用jQuery）

2012-05-28 Sébastien

给予的word-wrap:break-word您的DIV将强制换行，并让您的DIV对待长文本喜欢你的文本做了风格。

2012-05-28 13:57:45 techfoobar

我已经尝试设置“自动换行”的div，但它没有做这项工作。长字在div中分成两个单词，而整个单词在textarea中放在一个新行中。 –

嗯..看到这个小提琴：http://jsfiddle.net/XjcZh/1/ – techfoobar

对不起，我的错误，我用“ ”替换空格，以便它们可以重复，看起来像textarea，但因为这样没有空格来打破这个词。 –

添加overflow:auto或overflow:scroll和width:/height:您div的CSS，这会给你一个滚动条，将自动换行，看起来像一个文本，也没有边境。你可以给它一个border风格，以使它看起来更像一个textarea。

像这样：

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

    Your text goes here 

</div>

2012-05-28 13:57:19

回答