html - 如何使前置/代码标签包装占据容器的整个高度？

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>

标签： htmlcss

Answer 1

您可以将空格和分词属性添加到 pre + 100% 高度以使溢出起作用。

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