用 CSS tab-size 属性在 HTML 中设置制表符大小

CSS tab-size 属性允许我们设置制表符中使用的空格数量。制表符字符的宽度可以轻松自定义。为制表符大小设置的值以空格为单位。让我们看看语法。

语法

 tab-size: value;

上面的值为设置制表符的数字值。

以下示例说明了 CSS tab-size 属性。

示例

在此，我们使用 tab-size 属性将制表符大小设置为 32 -

tab-size: 32;

Firefox 的制表符大小也已设置 -

-moz-tab-size: 32;

让我们看看该示例 -

<!DOCTYPE html>
<html>
<head>
   <style>
      body {
         display: flex;
         flex-direction: column;
      }
      p {
         white-space: pre;
      }
      p:last-of-type {
         tab-size: 32;
         -moz-tab-size: 32;
      }
   </style>
</head>
<body>
   <p>Ut sed felis lobortis, fermentum magna vitae, imperdiet lectus.</p>
   <p>Ut sed felis lobortis, fermentum magna vitae, imperdiet lectus.</p>
</body>
</html>

示例

在此，我们使用 tab-size 属性将制表符大小设置为 1 -

tab-size: 1;

Firefox 的制表符大小也已设置 -

-moz-tab-size: 1;

让我们看看该示例 -

<!DOCTYPE html>
<html>
<head>
   <style>
      pre {
         margin: 2%;
         box-shadow: inset 0 0 12px lime;
      }
      p {
         background: lavender;
         tab-size: 1;
         -moz-tab-size: 1;
      }
   </style>
</head>
<body>
   <pre>
      4 tabs of size 1 paragraph
      .|.|.|.
      <p>
         Ut sed felis lobortis, fermentum magna vitae, imperdiet lectus.
      </p>
   </pre>
</body>
</html>

更新于：2023 年 12 月 27 日

537 次浏览

开始你职业生涯

完成课程后获得认证

开始
广告