html - 如何使 <pre><code> 元素水平滚动并确保内容在边框框内?

标签 html css skeleton-css-boilerplate

我正在使用 Skeleton CSS在我的样式元素中,我注意到 CSS 库中的长文本有问题 <pre><code></code></pre>边框未覆盖整个代码的元素(示例在 grid code section 中,请同时引用下图)。我如何确保它类似于 GitHub <pre><code></code></pre>以下?也就是说,直到使用 Skeleton CSS 的代码行末尾,该框仍会显示。非常感谢您。

<pre><code>hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello</code></pre>

skeleton CSS

最佳答案

刚刚找到的解决方案是添加overflow-x: scroll; <code></code> 样式标签

<code class="code-example-body prettyprint" style="overflow-x: scroll;"></code>

关于html - 如何使 <pre><code> 元素水平滚动并确保内容在边框框内?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/70216510/

相关文章:

javascript - 清除 :target CSS psuedo class

javascript - 如何让Javascript根据输入写入价格?

css - 是什么导致 body 标签变宽?

css - 将一张图片居中,右对齐另一张,在同一行

jquery - 居中定位 div 不是很居中

html - 根据显示尺寸更改 div 的类别

html - 定制音频标签

php - 数组 - Orderby - 类型

css - CSS 中带有透明文本的 Div?

css - Magento - 获取 2 列产品登陆页面( GridView )