包含在div中的相同文本将在Javascript插入后溢出相同的div

Question

我有一个用一些文本初始化的div：

<div id="previewText" style="margin: 10px auto; width:366px; background: #EDEDED; border: solid 1px #CCC; padding: 10px; word-wrap: normal; font-size: 13px; font-family: 'lucida grande',tahoma,verdana,arial,sans-serif;">
   word1 word2 word3333 word444444 word55555 word666666 word777777 word888888 word999999 word1000000 word11111111 word222222222 word333333333   
</div>

我在浏览器上看到了这个：

然后，如果我将textarea中的相同文字附加到确切的div：

文字区域：     

Javascript代码

var TheTextBox = document.getElementById("fbMessage");
var textAreaText = TheTextBox.value;

previewText = textAreaText.replace(/\n/g, "<br/>").replace(/\s/g, "&nbsp");

document.getElementById('previewText').innerHTML = previewText;

新的附加文字超出了div的宽度，我看到了：

我尝试将div更改为表格并将文本放在<td>内。但同样的事情发生了。

为什么会这样？如何在复制后保留div内的文本？

**注意：我不想使用word-wrap: break-word;，因为不想破坏任何单词

Answer 1

尝试添加“overflow：hidden;”到div的风格宣言。

如果这不起作用，请尝试删除“自动换行”规则，您可能不需要这样做。