标签宽度 CSS 属性 [英] Tab width CSS property

问题描述

WebKit 和 Microsoft 浏览器是否支持任何指定选项卡宽度的方法，例如 Firefox 和 Opera 使用它们的 -moz-tab-size 和 -o-tab-size属性?

Do the WebKit and Microsoft browsers support any method of specifying tab width like Firefox and Opera do using their -moz-tab-size and -o-tab-size properties?

例如，我希望 <textarea> 中的选项卡具有 4 个空格的宽度:

For example, I want the tabs in my <textarea> to have a width of 4 spaces:

textarea {
    -moz-tab-size: 4;
    -o-tab-size: 4;
    /* How would I do this in Chrome, Safari, and IE? */
}

我创建了一个 tab-size polyfill (Demo):

I created a tab-size polyfill (Demo):

<script> // tab-size polyfill
var codeElements = document.getElementsByTagName('code'), // Applies to all code elements. Adjust to your needs.
codeElementCount = codeElements.length,
e = d.createElement('i');

if(e.style.tabSize !== '' && e.style.mozTabSize !== '' && e.style.oTabSize !== '') {
    for(var i = 0; i < codeElementCount; i++) {
        codeElements[i].innerHTML = codeElements[i].innerHTML.replace(/	/g,'<span class="tab">&#9;</span>');
    }
}
</script>

<style>
.tab {
    width: 2.5em; /* adjust to your needs */
    display: inline-block;
    overflow: hidden;
}
</style>

注意:这不适用于<textarea>，但仅适用于可以包含其他元素的元素.如果浏览器确实支持 tab-size 它会使用它来代替.

Note: This wont work on <textarea>s, but only on element's that can contain other elements. If the browser does support tab-size it'll use that instead.

推荐答案

tab-size 目前仅由 Firefox 和 Opera 使用您给定的供应商前缀实现.

tab-size is currently only implemented by Firefox and Opera using your given vendor prefixes.

对于 WebKit，有一个错误报告要求实现该属性.我相信这方面的工作已经开始，正如对该报告的评论中所看到的那样.

For WebKit, there's a bug report requesting that the property be implemented. I believe work has already started on it, as can be seen in the comments on that report.

对于 IE，我在 IE9 或 IE10 中找不到关于 -ms-tab-size 或 tab-size 实现的任何信息.我想 IE 团队并没有那么聪明.

For IE, well, I can't find anything about an -ms-tab-size or tab-size implementation in IE9 or IE10. I suppose the IE team has been none the wiser.

这篇关于标签宽度 CSS 属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！