Настройка ширины вкладки PRE в разных веб-браузерах - PullRequest
Новая
       23

Настройка ширины вкладки PRE в разных веб-браузерах

10 голосов
/ 14 июля 2011

Есть способ установить ширину вкладки PRE в Firefox и Opera, но нет общеизвестного способа сделать это в 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%;
}

Ответы [ 2 ]

6 голосов
/ 14 сентября 2013

Согласно странице MDN tab-size правильный формат: 

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
    });
});
0 голосов
/ 14 июля 2011

Функция CSS 3 Text tab-size слишком нова (и недостаточно стандартизирована) для широкого развертывания (плюс вкладки не очень популярны в общем).

Для случаякод с жесткими вкладками, просто запустите его путем преобразования табуляции в пробелы, прежде чем размещать его на странице.

Базовые макеты гораздо полезнее, чем закругленные углы

Вкладки никогда не предназначались для выполнения задач макета общего назначения (и были бы совершенно неподходящими для этого).В CSS3 рекламируются более мощные функции макета - см., Например, Grid и Flexbox в IE10.

...