1

我有一个具有以下样式的 pre 元素：

pre {
    background: #555;
    background-image: -webkit-linear-gradient(#555 50%, #505050 50%);
    background-image:    -moz-linear-gradient(#555 50%, #505050 50%);
    background-image:     -ms-linear-gradient(#555 50%, #505050 50%);
    background-image:      -o-linear-gradient(#555 50%, #505050 50%);
    background-image:         linear-gradient(#555 50%, #505050 50%);
    background-position: 0 0;
    background-repeat: repeat;
    background-size: 4.5em 4.5em;
    color: #fff;
    font-size: .8em;
    line-height: 2.25;
    margin: 0 -2.25em 2.25em;
    overflow: auto;
    padding: 2.25em;
}

为什么在滚动pre元素时会忽略右填充？我不想换行，我想要这种行为（这不是基于规范的预期行为，但似乎在 webkit 中工作）：http: //jsfiddle.net/joshnh/Ly5kz/

这是一个现场示例的链接：http: //joshnh.com/2012/08/14/making-a-pure-css-featured-image-slider/#step1

4

4 回答 4

3

这不是填充的工作原理。如果您的内容被强制超出框的边缘，它将继续播放而不会被背景覆盖。填充物是盒子内部周围的空间。适合框的所有文本与框边缘之间将有 x 量的空间。

为了拥有类似填充的遮罩/框/边框，您需要有一个具有边框和填充的包装 div，并将您的其他样式添加到 pre。

http://jsfiddle.net/ktJ3g/

于 2012-09-14T02:44:02.340 回答
0

pre 元素是 white-space:nowrap 默认情况下，你需要设置某种 wrap 属性。以下是您的选择：http ://www.w3schools.com/cssref/pr_text_white-space.asp

于 2012-09-04T01:09:45.260 回答
0

试试 white-space: pre-wrap; - 另外，我认为您通过使用 lang 属性将内容识别为包含 html 或 css 来滥用它。我相信应该用它来表示内容的语言编码，即en_US、fr_FR等

于 2012-09-04T01:26:42.563 回答
0

基于 prism.js 的<pre>元素的注释：

您可以使用normalize-whitespace插件：

import 'prismjs/plugins/normalize-whitespace/prism-normalize-whitespace';
于 2020-05-30T04:49:21.957 回答