<div>背景被削减</div>

Question

我想在<div>中突出显示一些行 有些行比<div>的宽度长，所以我使用<div style="overflow:scroll;"> 但是，当我向右滚动时，突出显示的背景会在右边缘切割，因此长于<div>宽度的文本没有背景。

<style>
.a { background-color:red; }
.b { background-color:yellow; }
</style>
<div style="overflow:scroll;width:49%;height:100%;border:1px solid silver;white-space:nowrap;">
<pre>
<div class="a">ffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff
dffdgfdsgfg</div>
<div class="b">asdsad</div>
</pre>
</div>

任何人都可以解决这个问题吗？

Answer 1

删除white-space：nowrap;

并添加word-wrap: break-word;

Answer 2

我认为您的问题可能与wordwrap有关：这是一篇很好的文章解释了它的用法：http://webdesignerwall.com/tutorials/word-wrap-force-text-to-wrap

希望它有所帮助，