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.
其他资源
- W3 关于 tab-size 属性 的规范
- MDN
- 2008 年向 w3 发送的最初电子邮件 介绍了 tab-size 的想法
浏览器支持
这些浏览器支持数据来自 Caniuse,它包含更多详细信息。数字表示浏览器从该版本开始支持该功能。
桌面
Chrome | Firefox | IE | Edge | Safari |
---|---|---|---|---|
42 | 53* | 否 | 79 | 13.1 |
移动设备 / 平板电脑
Android Chrome | Android Firefox | Android | iOS Safari |
---|---|---|---|
127 | 127 | 127 | 13.4-13.7 |
此属性降级非常优雅。每个浏览器都支持制表符字符。不支持此属性不会破坏任何内容,浏览器只是显示八个字符宽的制表符。
我最近创建了一个 jQuery 插件来在目前不支持 tab-width 的浏览器中正确显示带制表符的内容
https://github.com/davestewart/jquery-plugins/tree/master/tabSize
它使用 CSS3 属性 tab-size(如果可用),但如果不可用,它会 *正确* 将制表符转换为空格,包括那些不占用整个制表符宽度(即列)的制表符。
关于建议的 polyfill 的简短说明:通过(重新)设置
.innerHTML
,绑定到后代元素的任何事件处理程序都将被销毁。这也适用于 Dave 的插件。
此属性实际上在 iOS7 上运行得很好。(在 iOS 7.1.1 上测试)
如何为有序/无序列表添加制表符空格?
页眉
left
right
页脚
我不明白为什么第一个演示在我的浏览器(FF 69-70)上不起作用,而另外两个演示(同一个浏览器)却可以工作