📌  相关文章
📜  HTML | DOM 样式 tabSize 属性(1)

📅  最后修改于: 2023-12-03 14:41:50.184000             🧑  作者: Mango

HTML | DOM tabSize 属性

简介

tabSize 属性规定在文本中每个 tab 符号所展示的空格数，这样 user agents（浏览器）就可以渲染适当的空格。该属性只应用于显示而非存储的字符，它不影响元素中的值。该属性只适用于 pre 和 textarea 元素。

语法
object.style.tabSize="number|length|inherit"
属性值
  • number：规定每个 tab 符号所展示的空格数目，此值必须为非负整数，默认值为 8。
  • length：规定每个 tab 符号所展示的空格数目，此值可以是任何长度值。
  • inherit：规定应从父元素继承 tabSize 属性的值。
实例
样例代码
<!DOCTYPE html>
<html>
<head>
	<title>HTML | DOM tabSize 属性</title>
	<style>
		pre{
			tab-size: 4;
			-moz-tab-size: 4; /* Firefox */
			-o-tab-size: 4; /* Opera */
		}
	</style>
</head>
<body>
	<pre>
		Hello World!
			This is a tabSize example.
	</pre>
</body>
</html>
输出

tabSize样例

浏览器兼容性

| 特性 | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | |:----:|:------:|:----:|:-------:|:----------------:|:-----:|:------:| | 支持版本 | 21.0 | 12.0 | 6 | 10 | 15.0 | 6.0.2 | | vendor支持版本 | -webkit-：n/a
-moz-：4 | n/a | -moz- ： -o- | -ms- | -webkit- ：n/a | -webkit- ：n/a|

注意：Internet Explorer 不支持以 length 值调用 tabSize 属性。

总结

通过设置 HTML | DOM tabSize 属性,可以规定每个 tab 符号所展示的空格数，使得文本展示更加整齐清晰。它只适用于 pre 和 textarea 元素，通过设置不同的数值结果也不相同，可以根据不同情况去灵活使用。