Указание ширины табуляции? - PullRequest
62 голосов
/ 20 марта 2009

Можно ли определить ширину табуляции при отображении пробела (скажем, внутри тега

или чего-то еще)? Я не могу найти ничего, что можно сделать с помощью CSS, но кажется, что это было бы довольно распространенным занятием. 

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

Ответы [ 3 ]

97 голосов
/ 29 декабря 2011

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

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

См. Также статью на developer.mozilla.org: размер вкладки .

.tabstop
{
    -moz-tab-size: 4;
    -o-tab-size:   4;
    tab-size:      4;
}
Unstyled tabs (browser default)

	one tab
		two tabs
			three tabs
Стилизованные вкладки (4em)
	one tab
		two tabs
			three tabs
5 голосов
/ 20 марта 2009

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

Вот решение, оно не изящное, так как оно должно быть сделано для каждого экземпляра вкладки, но оно заставляет вкладки занимать меньше места и сохраняет форматирование для копирования из браузера (очевидно, замените «ОДНА вкладка здесь "с реальной вкладкой это программное обеспечение для блога автоматически удаляет вкладки из записей, которые кажутся):

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

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

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

Есть еще один вопрос переполнения стека на эту тему .

4 голосов
/ 05 ноября 2010

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

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

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

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

, но такова жизнь. 

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