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

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

css html

Gary Willoughby · 技术社区 · 16 年前

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

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

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

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

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

2 回复 | 直到 13 年前

outis 16 年前

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

Community Mohan Dere 9 年前

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

管理员:参考问题的可能副本。

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

1 年前

Jamie · 在CSS链接的文件名中添加Jinja占位符

1 年前

ptownbro · 重叠分区标签,同时保持以下所有分区和内容就位

1 年前

Luke Frost IEng MIMechE · Bootstrap 5.3在Div中的项目位置没有如我所期望的那样显示

1 年前

Reegan · 使用Angular ngFor指令在html中渲染嵌套对象值

1 年前

wqyutv · 当找不到文件时,任何破坏错误的东西都不会出现,我该怎么解决这个问题?

1 年前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

1 年前

Gukkey · 在React中明确隐藏日期类型输入后,如果我单击父div,如何显示日期选择器?

1 年前

Lorenzo Bertolaccini · 在Angular项目中通过对话框后,在控制台中显示但在HTML中不显示的数据数组

1 年前

john Rizzo · 按钮背景颜色、悬停和活动状态存在问题

1 年前