tab-size

Avatar of Chris Coyier
Chris Coyier on

DigitalOcean 为您旅程的每个阶段提供云产品。立即开始使用 $200 免费试用额度!

CSS 中的 tab-size 属性用于调整制表符字符显示的空间量。

pre {
  tab-size: 8; /* default. Pretty big! */

  tab-size: 2;
  tab-size: 13px; /* you can set a width-per-tab also */
}

使用这些范围滑块进行操作,以查看不同的值如何影响制表符的渲染方式(当您可以实际看到制表符时)。

查看 CodePen 上的
rNBLYaP
by Chris Coyier (@chriscoyier)
on CodePen.

制表符字符(Unicode U+0009)通常由空白处理规则转换为空格(Unicode U+0020),然后折叠,以便在浏览器中仅显示一行中的一个空格。因此,tab-size 属性仅在空白处理规则不适用时才有用,即在 <pre> 标签内以及元素的 white-space 属性设置为 pre-wrap 时。

tab-size 属性的默认值为 8 个空格字符,它可以接受任何正整数。

这里有一些 tab-size 可以使用的方式示例

查看 CodePen 上的
rNBLYjg
by Chris Coyier (@chriscoyier)
on CodePen.

如您在上面的示例中看到的,tab-size 属性调整分配给制表符字符的空间量。在第二个示例中,<p> 标签必须将其 white-space 属性调整为 pre-wrap,以便制表符字符不会转换为常规空格并折叠。

您还会注意到,在 CSS 中,-moz--o- 前缀对于 Firefox 和 Opera 是必需的,但 Chrome 接受非前缀版本。

Polyfill

八个空格的默认值非常大。如果您需要支持不受支持的浏览器,可以使用此 polyfill(此 CodePen 中的 JavaScript)

查看 CodePen 上的
tab-size polyfill
by CSS-Tricks (@css-tricks)
on CodePen.

其他资源

浏览器支持

这些浏览器支持数据来自 Caniuse,它包含更多详细信息。数字表示浏览器从该版本开始支持该功能。

桌面

ChromeFirefoxIEEdgeSafari
4253*7913.1

移动设备 / 平板电脑

Android ChromeAndroid FirefoxAndroidiOS Safari
12712712713.4-13.7

此属性降级非常优雅。每个浏览器都支持制表符字符。不支持此属性不会破坏任何内容,浏览器只是显示八个字符宽的制表符。