html - 背景被剪掉了

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

删除空白:nowrap;

并添加word-wrap: break-word;