代码之家 › 专栏 › 技术社区 › Gary Willoughby

使用css控制a<pre>中的制表符空间?

css html

Gary Willoughby · 技术社区 · 15 年前

是否可以指定选项卡空间在 <pre> 使用CSS?

例如,假设我有一段代码出现在 <预科; 在网页上:

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

是否可以使用CSS指定选项卡缩进行的不同空间量?

如果没有,有什么解决办法吗?

2 回复 | 直到 12 年前

outis 15 年前

从CSS 2.1, Â§ 16.6.1 The 'white-space' processing model :

所有标签(U+0009)都呈现为一个水平移动,该移动将下一个标志符号的开始边缘与下一个标签停止对齐。制表位出现在以块的字体从块的起始内容边缘呈现的空间(U+0020)宽度的8倍的点上。

CSS3文本基本上说的是同一件事。

从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)} );
}