Задание ширины табуляции?

Можно ли определить ширину табуляции, когда отображается пробел (например, внутри тега <pre> или что-то еще)? Я не могу найти что-либо, чтобы сделать это с помощью CSS, но похоже, что это было бы довольно распространенным явлением.

В моем случае ширина табуляции настолько широка, что некоторые фрагменты кода на странице слишком широки. Если бы я мог каким-то образом укоротить ширину табуляции, чтобы она соответствовала без полос прокрутки, это значительно облегчило бы ситуацию. (Я полагаю, я мог бы просто заменить вкладки пробелами, но в идеале я хотел бы найти способ сделать это, не делая этого)

Ответ 1

Я считаю, что это сообщение в блоге должно помочь вам:

Здесь решение, это не аккуратно, так как это нужно делать для каждого экземпляра вкладки, но это делает вкладки занимают меньше места и сохраняет форматирование для копирования из браузера (очевидно, заменить "A SINGLE TAB HERE" "с реальной вкладкой, это программное обеспечение для блога автоматически удаляет вкладки из записей, которые, кажется):

<span style="display:none">A SINGLE TAB HERE</span><span style="margin-left:YOUR NEW TAB WIDTH"></span>

В принципе, замените каждый экземпляр вкладки вашего кода на этот фрагмент кода (после выбора подходящей ширины вы можете легко сделать это в таблице стилей). Код искусственно вставляет маржу, сохраняя исходную вкладку в коде, готовом для копирования/вставки.

Кстати, похоже, что tab stops сделал его в спецификации CSS.

Также есть вопрос о переполнении стека по этому вопросу.

Ответ 2

Используйте свойство размер табуляции. В настоящее время вам нужны префиксы поставщиков. Пример:

pre
{
    -moz-tab-size: 4;
    -o-tab-size:   4;
    tab-size:      4;
}

См. также статью на developer.mozilla.org: tab-size.

.tabstop
{
    -moz-tab-size: 4;
    -o-tab-size:   4;
    tab-size:      4;
}

Unstyled tabs (browser default)
<pre>
	one tab
		two tabs
			three tabs
</pre>

Styled tabs (4em)
<pre class="tabstop">
	one tab
		two tabs
			three tabs
</pre>

Ответ 3

Как отметил Джордж Штокер, вкладки должны появляться в будущем CSS (FF4 должен иметь это), но в среднем...

Проблема со связанным сообщением в блоге заключается в том, что вкладки не копируются при копировании/вставке из браузера. В качестве альтернативы попробуйте следующее:

<style>
.tabspan{
    display:inline:block;
    width:4ex;
}
</style>
<pre>
int main()
{
<span class=tabspan>\t</span>return 0;
}
</pre>

Где "\ t" в приведенном выше примере является фактическим символом табуляции. Теперь он должен скопировать и вставить правильно. Не так приятно, как пощелкать свойство css на <pre> тег, но это жизнь.

(P.S. ответил на это старое сообщение как высокое на google для 'css tab width', и я придумал это решение вскоре после этого.)