Html 指定制表符宽度？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/667200/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Specifying Tab-Width?
提问by Wilco
Is it possible to define the tab-width when whitespace is displayed (say within a <pre> tag or something)? I can't find anything to do this with CSS, but this seems like it would be a pretty common thing to want to do.
是否可以在显示空格时定义制表符宽度（例如在 <pre> 标签内或其他内容中）？我找不到任何可以用 CSS 做到这一点的东西，但这似乎是一件很常见的事情。
In my case, the tab width is so wide that it causes some of my code snippets on a page to be too wide. If I could somehow shorten the tab-width to make it fit without scrollbars it would make things much easier. (I suppose I could just replace the tabs with spaces, but ideally I would love to find a way to do this without doing that)
就我而言，选项卡宽度太宽，导致页面上的一些代码片段太宽。如果我能以某种方式缩短标签宽度以使其适合没有滚动条，那将使事情变得容易得多。（我想我可以用空格替换制表符，但理想情况下我很想找到一种方法来做到这一点而不这样做）
采纳答案by George Stocker
I believe this blog postshould help you out:
我相信这篇博文应该能帮到你：
Here's a solution, it's not neat since it has to be done for every instance of a tab, but it makes the tabs take up less space and preserves the formatting for copying out of the browser (obviously replace "A SINGLE TAB HERE" with a real tab, this blog software automatically removes tabs from entries it seems):
这是一个解决方案，它并不整洁，因为它必须为选项卡的每个实例完成，但它使选项卡占用更少的空间并保留了从浏览器复制的格式（显然将“A SINGLE TAB HERE”替换为真正的标签，这个博客软件会自动从条目中删除标签）：
<span style="display:none">A SINGLE TAB HERE</span><span style="margin-left:YOUR NEW TAB WIDTH"></span>
Basically, replace every instance of a tab in your code with that code snippet (after choosing a suitable width, you could do it in a stylesheet pretty easily). The code artificially inserts the margin whilst keeping the original tab in the code ready for copy/pasting.
基本上，用该代码片段替换代码中选项卡的每个实例（在选择合适的宽度后，您可以很容易地在样式表中执行此操作）。代码人为地插入边距，同时保持代码中的原始标签准备复制/粘贴。
Incidentally, it looks like tab stopsmade it into the CSS specification.
顺便说一句，它看起来像是tab stops纳入了CSS 规范。
There's also another Stack Overflow question on this subject.
关于这个主题还有另一个 Stack Overflow 问题。
回答by fuxia
Use the tab-size property. You'll need vendor prefixes currently. Example:
使用tab-size 属性。您当前需要供应商前缀。例子：
pre
{
-moz-tab-size: 4;
-o-tab-size: 4;
tab-size: 4;
}
See also the article on developer.mozilla.org: tab-size.
另请参阅 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>回答by DaedalusFall
As George Stocker pointed out tab stops should be coming along in a future CSS (FF4 should have it), but in the mean time...
正如 George Stocker 指出的，制表位应该在未来的 CSS 中出现（FF4 应该有），但同时......
The problem with the linked blog post is that the tabs aren't copied when copying/pasting from the browser. As an alternative try the following:
链接的博客文章的问题在于从浏览器复制/粘贴时不会复制选项卡。作为替代，请尝试以下操作：
<style>
.tabspan{
display:inline:block;
width:4ex;
}
</style>
<pre>
int main()
{
<span class=tabspan>\t</span>return 0;
}
</pre>
Where "\t" in the above is the actual tab character. Now it should copy and paste properly. Not as nice as slapping a css property on the <pre> tag, but such is life.
上面的“\t”是实际的制表符。现在它应该正确复制和粘贴。不像在 <pre> 标签上添加一个 css 属性那么好，但这就是生活。
(P.S. answered this old post as its high on google for 'css tab width' and I came up with this solution shortly after coming here.)
（PS 回答了这篇旧帖子，因为它在谷歌上的“css 标签宽度”很高，我来到这里后不久就想出了这个解决方案。）
