指定标签宽度?

时间:2009-03-20 17:42:33

标签: html css xhtml whitespace

是否可以在显示空格时定义标签宽度(例如在< pre>标签内)?我用CSS找不到任何相关的东西,但这似乎是一件很常见的事情。

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

3 个答案:

答案 0 :(得分:97)

使用tab-size property。您目前需要供应商前缀。例如:

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>

答案 1 :(得分:5)

我相信blog post可以帮助你:

  

这是一个解决方案,它不是很整洁,因为它必须为选项卡的每个实例完成,但它使选项卡占用更少的空间并保留格式化以便从浏览器中复制(显然取代“单个选项卡在这里” “有了真正的标签,这个博客软件会自动从条目中删除标签页:”

<span style="display:none">A SINGLE TAB HERE</span><span style="margin-left:YOUR NEW TAB WIDTH"></span>
  

基本上,使用该代码片段替换代码中的每个选项卡实例(在选择合适的宽度后,您可以非常轻松地在样式表中执行此操作)。代码人为地插入边距,同时保持代码中的原始选项卡可以复制/粘贴。

顺便说一下,tab stops看起来像是CSS specification

还有另一个Stack Overflow问题on this subject

答案 2 :(得分:4)

正如乔治·斯托克所指出的那样,制表符应该在未来的CSS中出现(FF4应该有它),但同时......

链接博客文章的问题是,从浏览器复制/粘贴时不会复制选项卡。作为替代方案,请尝试以下方法:

<style>
.tabspan{
    display:inline:block;
    width:4ex;
}
</style>
<pre>
int main()
{
<span class=tabspan>\t</span>return 0;
}
</pre>

上面的“\ t”是实际的制表符。现在它应该正确复制和粘贴。不如在&lt; pre&gt;上拍打css属性一样好标签,但这就是生活。

(P.S。回答这篇老帖子,因为谷歌的'css tab width'很高,我来到这里后不久便提出了这个解决方案。)