CSS tab-size 属性

CSS 参考手册 CSS 参考手册


设置一个 <pre> 元素的 tab-size:

<!DOCTYPE html>
<html>
<head>
  <style>
    #t1 {
      tab-size: 4;
      -moz-tab-size: 4;
      /* 针对 Firefox 的代码 */
      -o-tab-size: 4;
      /* 针对 Opera 的代码 */
    }

    #t2 {
      tab-size: 16;
      -moz-tab-size: 16;
      /* 针对 Firefox 的代码 */
      -o-tab-size: 16;
      /* 针对 Opera 的代码 */
    }
  </style>
</head>
<body>
  <pre id="t1">
    I use tab-size 4
  </pre>

  <pre id="t2">
    I use tab-size 16
  </pre>

  <p><b>注意:</b>目前只有 Chrome 支持 tab-size 属性。</p>
  <p><b>注意:</b>Firefox 支持另一个可替代该属性的属性,即 -moz-tab-size 属性。</p>
  <p><b>注意:</b>Opera 支持另一个可替代该属性的属性,即 -o-tab-size 属性。</p>

</body>
</html>

尝试一下 »


浏览器支持

Internet ExplorerFirefoxOperaGoogle ChromeSafari

目前只有 Chrome 支持 tab-size 属性。

Firefox 支持另一个可替代该属性的属性,即 -moz-tab-size 属性。

Opera 支持另一个可替代该属性的属性,即 -o-tab-size 属性。

目前没有浏览器支持该值作为长度单位。


定义和用法

tab-size 属性规定制表符(tab)字符的空格长度。

在 HTML 中,制表符(tab)字符通常显示为一个单一的空格字符,除了一些元素,比如 <textarea> 和 <pre>,tab-size 属性的结果只对这些元素有效。

<!DOCTYPE html>
<html>
<body>

  <pre id="t1">
    I have tabs inside!
  </pre>

  <p>点击“尝试一下”按钮,改变 PRE 元素的 tab-size 属性。</p>

  <button onclick="myFunction()">尝试一下</button>

  <script>
    function myFunction() {
      document.getElementById("t1").style.tabSize = "16";
      document.getElementById("t1").style.MozTabSize = "16"; // 针对 Firefox 的代码
      document.getElementById("t1").style.OTabSize = "16"; // 针对 Opera 的代码
    }
  </script>

  <p><b>Note:</b> The tabSize property is currently only supported in Chrome.</p>
  <p><b>Note:</b> Firefox supports an alternative, the MozTabSize property.</p>
  <p><b>Note:</b> Opera supports an alternative, the OTabSize property.</p>

</body>
</html>

尝试一下 »

默认值: 8
继承:
可动画化: 否。请参阅 可动画化(animatable)
版本: CSS3
JavaScript 语法: object.style.tabSize="16" - 尝试一下 -

CSS 语法

tab-size: number|length|initial|inherit;

属性值

描述 测试
number 默认值是 8。规定每个制表符(tab)字符要显示的空格字符的数量。 测试 »
length 规定制表符(tab)字符的长度。几乎所有的主流浏览器都不支持该属性值。
initial 设置该属性为它的默认值。请参阅 initial 测试 »
inherit 从父元素继承该属性。请参阅 inherit

CSS 参考手册 CSS 参考手册