Question

是否可以使用CSS指定标签空间在<pre>中占用的像素数等？

例如，假设我在网页上的<pre>中出现了一段代码：

function Image()
{
    this.Write = function()
    {
        document.write(this.ToString());
        return this;
    };
    ...
}
Image.prototype = new Properties();
...

是否可以使用CSS指定标签缩进行的不同空间量？

如果没有，是否有任何解决方法？

Answer 1

来自CSS 2.1，§ 16.6.1 The 'white-space' processing model：

所有制表符（U + 0009）都呈现为水平移位，使下一个制表符的下一个字形的起始边缘对齐。制表位于块的起始内容边缘以块的字体呈现的空格宽度（U + 0020）的8倍的倍数处出现。

CSS3 Text说的基本相同。

来自HTML 4.01 § 9.3.4 Preformatted text: The PRE element

水平制表符（[ISO10646]和[ISO88591]中的十进制9）通常由可视用户代理解释为沿着每8个字符的制表位排列字符所需的最小非零空格数。我们强烈建议不要在预先格式化的文本中使用水平制表符，因为通常的做法是在编辑时将制表符间距设置为其他值，从而导致文档错位。

如果你关注领先的标签，用空格替换它们就很简单了。

/* repeat implemented using Russian Peasant multiplication */
String.prototype.repeat = function (n) {
    if (n<1) return '';
    var accum = '', c=this;
    for (; n; n >>=1) {
        if (1&n) accum += c;
        c += c;
    }
    return accum;
}
String.prototype.untabify = function(tabWidth) {
    tabWidth = tabWidth || 4;
    return this.replace(/^\t+/gm, function(tabs) { return ' '.repeat(tabWidth * tabs.length)} );
}

Answer 2

虽然上述讨论提供了一些历史背景，但时间已经改变，可以在此处找到更多相关信息和可能的解决方案：Specifying Tab-Width?

attn admin：可能重复的问题。

控制<pre> using CSS?</pre>中的标签空间

2 个答案: