CSS自定义制表符(TAB)宽度

来源:互联网 发布:恶搞p图软件 编辑:程序博客网 时间:2024/06/16 02:08

制表符常用来表示代码缩进,制表符的宽度的设置,对于任何一款代码编辑器来说都是很必须的功能。

在浏览器中展示代码的时候,通常我们只能将TAB替换为4个空格来显示,因为默认的TAB太宽了。

W3C的CSS3草案中已有关于TAB宽度的设定,在这里。

高兴的是,Firefox4和Opera10已经支持了,其它浏览器当前最新版仍然不支持。

(Firefox现在发布到版本9了,可见其对W3C标准支持度的领先,别看Chrome版本好变的老快,其实对标准的支持很残。)


要用到的CSS属性叫做 tab-size,可以赋值为一个整数,表示TAB宽度为多少个字符,默认是8。


W3C草案定义是这样的:

3.2. Tab Character Size: the ‘tab-size’ property

Name:tab-sizeValue:<integer> | <length>Initial:8Applies to:block containersInherited:yesPercentages:N/AMedia:visualComputed value:specified value

This property determines the measure of the tab character (U+0009) when rendered. Integers represent the measure in space characters (U+0020). Negative integers are not allowed.


示例:

<style type="text/css">pre {tab-size:4;-moz-tab-size:4;-o-tab-size:4;}</style><pre>ABCDEFGHTAB test12345678</pre>



对于不支持tab-size的浏览器,只能用font-size来影响tab宽度,麻烦一点了:

<style type="text/css">pre.t42 { font-size:9pt; }pre.t42 * { font-size:22pt; }</style><pre class="t42"><span>ABCDEFGH **</span><span>TAB test</span><span>12345678</span></pre>
原理就是在pre上的font-size决定TAB宽度,pre里面的文字用额外的font-size样式来确定字体大小。

对于Textarea,如果浏览器不支持tab-size,暂时还没办法。



原创粉丝点击