在不同的Web浏览器中设置PRE标签宽度

Question

有一种方法可以在Firefox和Opera中设置PRE标签宽度,但是在IE或Chrome中没有一种众所周知的方法可以做到这一点,因此PRE标签中的硬标签代码会受到影响.

pre {
    white-space: -moz-pre-wrap;
    white-space: -pre-wrap;
    white-space: -o-pre-wrap;
    white-space: pre-wrap;
    word-wrap: break-word;
    -moz-tab-size: 1.5em;
    -o-tab-size: 1.5em;

    margin: 1em 0 0 0;
    padding: 1em 1em 1em 1em;
    width: 65%;
}

Answer 1

根据MDN的标签大小页面,正确的格式是:

tab-size: 4;
-moz-tab-size: 4;
-o-tab-size: 4;

JavaScript后备:

var fix_tab_size = function(pre, size) {
    if(typeof fix_tab_size.supports === 'undefined') {
        var bs = document.body.style;
        fix_tab_size.supports = ('tab-size' in bs || '-o-tab-size' in bs || '-ms-tab-size' in bs || '-moz-tab-size'  in bs);
    }
    if(!fix_tab_size.supports) {
        if(typeof pre.each === 'function') { //jquery 
            $('pre').each(function() {
                var t = $(this);
                t.html(t.html().replace(/\t/g, new Array(size+1).join(' ')));
            });
        } else if(typeof pre.innerHTML === 'string') {
            pre.innerHTML = pre.innerHTML.replace(/\t/g, new Array(size+1).join(' '));
        }
    }
}
$(function() {
    fix_tab_size($('pre'),4);
    //or
    $.getJSON(src, function(data) {
        fix_tab_size($data_pre.html(data.code)); //etc
    });
});

Answer 2

CSS 3 文本功能tab-size太新了（而且还不够标准化），到目前为止尚未得到广泛部署（而且选项卡总体上不是很流行）。

\n\n

对于硬制表符代码的情况，只需在将其放在页面上之前通过制表符到空格的转换来运行它。

\n\n

\n

基本布局比圆角有用得多

\n

\n\n

选项卡从来就不是为了执行通用布局任务（并且完全不适合这样做）。CSS3\xe2\x80\x94 拥有更强大的布局功能，例如 IE10 中的 Grid 和 Flexbox。

\n