javascript - 包含在 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>

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

然后，如果我将相同的文本从 a 附加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

尝试添加“溢出：隐藏；” 到 div 的样式声明。

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