如何使预/代码标签包裹容器的整个高度

Question

我在我的网站上使用pre和code标记显示一些原始HTML代码。但是，我想对它进行更改，使代码包装并填充整个容器的高度，而不是用overflow:auto作为一行。

我怎样才能做到这一点？

.code-container {
width: 300px;
height: 800px;
background: #e6e6e6;
}
pre {
overflow: auto;
}

<div class="code-container">
<pre><code>&lt;img src="https://maps.googleapis.com/maps/api/staticmap?size=512x512&zoom=12&center=Chicago&format=png&style=feature:road.highway%7Celement:geometry%7Cvisibility:simplified%7Ccolor:0xc280e9&style=feature:transit.line%7Cvisibility:simplified%7Ccolor:0xbababa&style=feature:road.highway%7Celement:labels.text.stroke%7Cvisibility:on%7Ccolor:0xb06eba&style=feature:road.highway%7Celement:labels.text.fill%7Cvisibility:on%7Ccolor:0xffffff&key=YOUR_API_KEY /&gt;</code></pre>
</div>

Answer 1

您可以将空白和断字属性添加到pre+100%高度，以使溢出生效。

pre {
height: 100%;
overflow: auto;
white-space: normal;
word-break: break-all;
}