将文本拟合到div的宽度在Firefox中不起作用

Question

我有这行代码

<div id="myid" style="overflow-y:auto; height:400px; width:100%; word-wrap: break-word;">
  <pre>Long content in here</pre>
</div>

因此文本将适合div的宽度，但如果长度超过400px，则会在侧面显示滚动条。

适用于Safari移动版，Chrome移动版，IE桌面版和Chrome桌面版，但不适用于Firefox桌面版（26.0）。在FF中，滚动条显示在div水平

的底部

我错过了什么？这是获得我想要的正确方法吗？

PS文本包含在<pre>

中

Answer 1

首先，您不应该使用内联样式。

其次，从您的div样式中删除word-wrap: break-word，并为<pre>设置以下样式：

pre {
  white-space: pre-wrap; 
  word-wrap: break-word;
}

<强> Demo

如果您有兴趣，here's some examples of how and when to use the break-word and word-wrap properties。

Answer 2

为什么不使用text-align: justify？

Answer 3

我在FF中尝试了你的代码，但它确实有效。它有你正在寻找的垂直滚动条。不确定是什么问题。