Отобразить символ Tab (в элементе PRE) как 4 пробела в HTML?

Возможный дубликат:
Указание ширины табуляции?

Мне нужно напечатать символ табуляции в теге pre. Символ HTML для вкладки 	, но во всех браузерах, которые я попробовал, он выглядит как 8 пробелов.

Есть ли способ отрегулировать это, чтобы сделать шириной в 4 пробела, или есть другой символ HTML, который я могу использовать, это 4 пробела?

Ответ 1

В то время как я согласен с первым ответом на то, что вы могли бы просто поставить 4 пробела, кажется, что некоторая поддержка свойства tab-size в CSS (хотя поддержка IE отсутствует):

pre {
    -moz-tab-size:    4; /* Firefox 4+ */
    -o-tab-size:      4; /* Opera 11.5 & 12.1 only */
    tab-size:         4; /* Chrome 21+, Safari 6.1+, Opera 15+ */
}

Эффективно использовать white-space: pre или white-space: pre-wrap (или в тегах <pre>).

Ответ 2

Существует четыре символа, которые вы можете использовать, которые всегда расширяются до четырех пробелов. Это четыре пространства (в пределах pre по крайней мере и другие элементы, созданные соответственно).

Поскольку нет универсально согласованного метода того, как должна быть широкая вкладка и как именно она должна себя вести, лучше не использовать ее в тех местах, где вам нужен точный контроль над тем, как выглядит вывод. Ни HTML, ни браузеры не предоставляют какие-либо средства настройки ширины табуляции.

Ответ 3

По спецификациям HTML и в практике браузера табуляция на каждые 8 символов. Это не означает, что вкладка имеет 8 пробелов. Например, если у вас есть ABC DEF, то вкладка вызывает увеличение до 5 символов.

В CSS с помощью черновика CSS3 вы можете установить размер табуляции, то есть расстояние между табуляторами, например. tab-size: 4. Поддержка браузера довольно хороша, когда используются префиксы поставщиков, кроме IE.

Ответ 4

CSS - лучший способ справиться с этим для просмотра. Но если вы хотите, чтобы люди могли копировать/вставлять текст и получать четыре пробела для вкладки, тогда вы собираетесь использовать Javascript для изменения ваших предварительных тегов.

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
</head>
<body>
    <pre class="downtab">All    Tabs    Changed a   little.</pre>
    <script type="text/javascript">
        $(document).ready(function() {
            $(".downtab").each(function() {
                var text = $(this).html().replace(/\t/g, '    ');
                $(this).html(text);
            });
        });
    </script>
</body>
</html>

Настоящей магией здесь является функция replace(), используя глобально-согласованное регулярное выражение.