指定制表符宽度？

Question

指定制表符宽度？

htmlcssxhtmlwhitespace

65

在显示空格时（比如在 <pre> 标签内），是否可以定义选项卡宽度？我找不到使用 CSS 定义的方法，但这似乎是一个很常见的需求。

在我的情况下，选项卡宽度太宽了，导致页面上的一些代码片段过宽。如果能缩短选项卡宽度以适应页面而不出现滚动条，那将使事情变得更容易。（我可以用空格替换选项卡，但最好找到一种不需要这样做的方法）

- Wilco

1

我最近为我的一个网站创建了这个jQuery插件，以解决这个问题。它使用CSS3属性tab-size（如果可用），但如果不可用，则正确地将制表符转换为空格，包括那些不占据整个标签宽度的制表符，也就是列。插件地址：https://github.com/davestewart/jquery-plugins/tree/master/tabSize - Dave Stewart

重复，可能有其他答案。 - Cristian Ciupitu

3个回答

6

我相信这篇博客文章会对你有所帮助：

这是一个解决方案，虽然不太好看，因为它必须针对每个选项卡的实例进行操作，但它可以减少选项卡占用的空间，并且保留了复制浏览器中的格式（显然需要将“ A SINGLE TAB HERE”替换为实际的制表符，因为这个博客软件似乎会自动删除输入内容中的制表符）：

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

基本上，将代码中每个制表符的实例替换为该代码片段（选择合适的宽度后，您可以在样式表中轻松完成）。该代码人工插入了边距，同时保留了代码中原始的制表符以备复制/粘贴。

顺便说一下，看起来“制表位停靠点”已经出现在CSS规范中了。

关于这个问题，还有另一个Stack Overflow问题。。

- Gortok

4

“制表位已经被纳入CSS规范了。”不，它们没有。至少在此答案发布之时，它们尚未进入1级或2级规范。但是，在CSS3草案中有一个名为“tab-size”的属性提案。 - BoltClock

4

我相信这篇博客文章应该会对你有所帮助。以下是相关的部分引述：“好消息是，乍一看似乎已经过去两年多了，那个博客仍然存在，那篇文章还在那里。（我不知道内容是否改变了。）”外部链接可能会被修改、删除、移动等，而 Stack Overflow 旨在成为一种资源，不仅限于当您提出/回答问题时使用，还可以在将来其他人需要引用信息时使用。 - T.J. Crowder

1

@T.J.Crowder，你对我的帖子进行了点赞，因为我没有包含摘要，我会努力包含它。但是在你今天点赞的同时，请注意，这个答案是在将近3年前写的，当时政策还没有像现在这样明确。也许你应该留下评论，给我一个修复问题的机会，然后如果我没有做到，再进行点赞？ - George Stocker

@GeorgeStocker：完全同意。（是我最近给它投了反对票，尽管请注意，您无法确定这一点，直到我告诉您为止--您的帖子最近被链接并且最近引起了很多人的关注；它很容易被评论并且单独被投反对票。）我会在可以的时候至少撤销它（在答案更改之前我无法这样做）。 - T.J. Crowder

4

正如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属性那样方便，但这就是生活。

（顺便说一句，我回答这篇旧帖子是因为它在谷歌搜索“CSS tab width”中排名较高，而我在来这里后不久想出了这个解决方案。）

- DaedalusFall

1

你说得对，-moz-tab-size 已经在 Gecko 2 中实现了，这是 Firefox 4 使用的引擎。https://developer.mozilla.org/en/CSS/-moz-tab-size - BoltClock

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- fuxia · Accepted Answer

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