css tab-size属性怎么用


本文摘自PHP中文网,作者silencement,侵删。

css tab-size属性定义及用法

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

tab-size属性是css3中新增属性,目前只有Chrome浏览器支持tab-size属性;Firefox浏览器支持-moz-tab-size属性来替代该属性;Opera浏览器支持-o-tab-size属性来替代该属性。没有浏览器支持该值作为长度单位。

css tab-size属性语法格式

css语法:tab-size: number/length/initial/inherit

JavaScript语法: object.style.tableLayout="fixed"

属性值说

number:规定每个制表符(tab)字符要显示的空格字符的数量(默认值为8)

length:规定制表符(tab)字符的长度(几乎所有的主流浏览器都还不支持该属性值)

initial:设置该属性为它的默认值

inherit:从父元素继承tab-size属性的值

实例

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title>css tab-size属性制表符的空格长度</title>

<style type="text/css">

#t1{tab-size: 4;

-moz-tab-size: 4; /*Firefox */

-o-tab-size: 4; /*Opera */

}

#t2{tab-size: 8;

-moz-tab-size: 8; /*Firefox */

-o-tab-size: 8; /* Opera */

}

</style>

</head>

<body>

<pre id="t1">I use tab-size 4</pre>

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

<p>目前只有Chrome支持 tab-size属性。</p>

<p>Firefox支持可替代该属性的属性-moz-tab-size属性。</p>

<p>Opera支持可替代该属性的属性-o-tab-size属性。</p>

</body>

</html>

运行结果

ee9a43b636e83b537616b27c7116956.png

以上就是css tab-size属性怎么用的详细内容,更多文章请关注木庄网络博客

相关阅读 >>

css中怎么给按钮添加背景图片(详解及实例)

css切图是什么意思

css怎么自定义字体

css有哪几种样式

深入了解css中的选择器

css 怎么可以不继承样式

利用css完成一个悬停过渡动画的项目(超级简单)

css如何实现幻灯片效果

css怎么设置外边距

css如何实现圆角内凹效果

更多相关阅读请进入《css》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...