[CSS]背景色の幅を合わせたい

Question

webページでサンプルコードを表示するためのボックスを作りたいです。

図のようにコードが長くなった際に、背景色をボックスの端まで表示されるようにしたいのですが、どうすればよいでしょうか？

いま出力されている背景色は自分で実装したものではなく、Google Code prettyのテーマとして出力されているものです。

<pre class="prettyprint linenums"> 
...code here...
</pre>

/** code */
pre.prettyprint {
    font-family: Monaco, Menlo, Consolas, 'Courier New', Courier, monospace, sans-serif;
    border: none;
}

pre.prettyprint ol {
    overflow-x: auto;
}

pre.prettyprint ol.linenums > li {
    list-style-type: decimal;
    color: #999;
    padding-left: 0.8em
}

pre.prettyprint ol.linenums > li のwidthを100%にするなどしてみましたが、解決することができませんでした。また外枠の黒線を消したいと思いborderをnoneにしてみましたが、うまくいきませんでした。
どこの要素で指定すればよいか、教えていただけませんか？

Answer 1

試していないので憶測での回答となります。やくに立たなければ申し訳ありません。
overflow-wrapというプロパティがありますので、こちらを使ってみるのはいかがでしょうか？

pre.prettyprint ol.linenums > li {
    overflow-wrap: break-word;
}

参考サイト
https://developer.mozilla.org/ja/docs/Web/CSS/overflow-wrap

Comments

[退会済みユーザー]

回答ありがとうございます！
回答のやり方ではうまくいきませんでしたが、block要素とインライン要素の理解が浅いことが分かりました。
本当にやりたいことの本質とはそれてしまうので、もう少し勉強しなおしてから、実装に再挑戦してみようと思います。