指定标签宽度？

Question

是否可以在显示空格时定义标签宽度(例如在<pre>标签或其他内容中)？我用CSS找不到任何可以做到这一点的东西,但这似乎是一件很常见的事情.

在我的情况下,标签宽度太宽,导致我的一些页面上的代码片段太宽.如果我可以以某种方式缩短标签宽度以使其适合没有滚动条,它将使事情变得更容易.(我想我可以用空格替换标签,但理想情况下我很乐意找到一种方法来做到这一点而不这样做)

Answer 1

使用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>

Answer 2

我相信这篇博文可以帮到你:

这是一个解决方案,它不是很整洁,因为它必须为选项卡的每个实例完成,但它使选项卡占用更少的空间并保留格式以便从浏览器中复制(显然用"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问题.