Question

我有一个包含以下样式的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

Answer 1

这不是填充的工作方式。如果您的内容被强制通过框的边缘，它将继续而不被背景覆盖。填充物是盒子内部的空间。在框中适合的所有文本在它与框边之间将有x个空格。

为了有一个像padding一样的遮罩/盒子/边框，你需要有一个包含边框和填充的包装div，并将其他样式添加到前面。

http://jsfiddle.net/ktJ3g/

Answer 2

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

Answer 3

尝试白色空间：预包装; - 另外，我认为你通过使用它来识别包含html或css的内容来滥用lang属性。我认为它应该用于表示内容的语言编码，即en_US，fr_FR等

Answer 4

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

您可以使用normalize-whitespace插件：

import 'prismjs/plugins/normalize-whitespace/prism-normalize-whitespace';

Pre元素不尊重右边填充

4 个答案: