Возможный дубликат:
Указание ширины табуляции?
Мне нужно напечатать символ табуляции в теге pre. Символ HTML для вкладки 	, но во всех браузерах, которые я попробовал, он выглядит как 8 пробелов.
Есть ли способ отрегулировать это, чтобы сделать шириной в 4 пробела, или есть другой символ HTML, который я могу использовать, это 4 пробела?
В то время как я согласен с первым ответом на то, что вы могли бы просто поставить 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>).
Существует четыре символа, которые вы можете использовать, которые всегда расширяются до четырех пробелов. Это четыре пространства (в пределах pre по крайней мере и другие элементы, созданные соответственно).
Поскольку нет универсально согласованного метода того, как должна быть широкая вкладка и как именно она должна себя вести, лучше не использовать ее в тех местах, где вам нужен точный контроль над тем, как выглядит вывод. Ни HTML, ни браузеры не предоставляют какие-либо средства настройки ширины табуляции.
По спецификациям HTML и в практике браузера табуляция на каждые 8 символов. Это не означает, что вкладка имеет 8 пробелов. Например, если у вас есть ABC DEF, то вкладка вызывает увеличение до 5 символов.
В CSS с помощью черновика CSS3 вы можете установить размер табуляции, то есть расстояние между табуляторами, например. tab-size: 4. Поддержка браузера довольно хороша, когда используются префиксы поставщиков, кроме IE.
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(), используя глобально-согласованное регулярное выражение.