是否可以在显示空白时定义制表符宽度(例如在 <pre> 标记或其他内容中)?我找不到任何可以使用 CSS 执行此操作的内容,但这似乎是一件很常见的事情。
在我的例子中,标签宽度太宽了,以至于我在页面上的一些代码片段太宽了。如果我能以某种方式缩短制表符宽度以使其适合没有滚动条,那会让事情变得更容易。(我想我可以用空格替换制表符,但理想情况下我很想找到一种方法来做到这一点而不这样做)
是否可以在显示空白时定义制表符宽度(例如在 <pre> 标记或其他内容中)?我找不到任何可以使用 CSS 执行此操作的内容,但这似乎是一件很常见的事情。
在我的例子中,标签宽度太宽了,以至于我在页面上的一些代码片段太宽了。如果我能以某种方式缩短制表符宽度以使其适合没有滚动条,那会让事情变得更容易。(我想我可以用空格替换制表符,但理想情况下我很想找到一种方法来做到这一点而不这样做)
使用tab-size 属性。您目前需要供应商前缀。例子:
pre
{
-moz-tab-size: 4;
-o-tab-size: 4;
tab-size: 4;
}
另请参阅 developer.mozilla.org 上的文章:tab-size。
.tabstop
{
-moz-tab-size: 4;
-o-tab-size: 4;
tab-size: 4;
}
Unstyled tabs (browser default)
<pre>
one tab
two tabs
three tabs
</pre>
Styled tabs (4em)
<pre class="tabstop">
one tab
two tabs
three tabs
</pre>
我相信这篇博文应该可以帮助你:
这是一个解决方案,它并不整洁,因为它必须为选项卡的每个实例完成,但它使选项卡占用更少的空间并保留从浏览器复制出来的格式(显然将“A SINGLE TAB HERE”替换为真正的标签,这个博客软件会自动从条目中删除标签):
<span style="display:none">A SINGLE TAB HERE</span><span style="margin-left:YOUR NEW TAB WIDTH"></span>
基本上,用该代码片段替换代码中选项卡的每个实例(选择合适的宽度后,您可以很容易地在样式表中完成)。代码人为地插入边距,同时保留代码中的原始选项卡以供复制/粘贴。
顺便说一句,它看起来像是tab stops
被纳入了CSS 规范。
关于这个主题还有另一个 Stack Overflow 问题。
正如 George Stocker 指出的那样,制表位应该在未来的 CSS 中出现(FF4 应该有),但与此同时......
链接博客文章的问题是从浏览器复制/粘贴时不会复制选项卡。作为替代方法,请尝试以下操作:
<style>
.tabspan{
display:inline:block;
width:4ex;
}
</style>
<pre>
int main()
{
<span class=tabspan>\t</span>return 0;
}
</pre>
上面的“\t”是实际的制表符。现在它应该正确复制和粘贴。不如在 <pre> 标记上添加 css 属性那么好,但这就是生活。
(PS 回答了这个旧帖子,因为它在谷歌上的“css 标签宽度”很高,我来到这里后不久就想出了这个解决方案。)