CSS tab-size — ширина табуляції в pre і textarea

правити

Загальний опис

правити

Нотатка

Оскільки специфікація цієї технології ще не стабілізувалася, перевірте таблицю сумісності з браузерами.

Також зауважте, що синтаксис і поведінка цієї технології можуть змінюватися в майбутніх версіях браузерів, через можливу зміну специфікації.

автор: Svitlana правити

+ додати пораду чи нотатку

Синтаксис

tab-size: number|length|initial|inherit;

Властивість tab-size може отримувати 4 значень:

number

Визначає ширину табуляції в пробілах. Без задання 8. Тобто, якщо Ви вкажете в якості значення число 0, то слова які були розділені символом табуляції, зіллються в єдине.

автор: Svitlana

правити

length

Визначає довжину відступу. На даний момент це значення не підтимується жодним із браузерів.

автор: Svitlana

правити

initial

Встановлює властивість у значення без задання

автор: Svitlana

правити

inherit

Вказує на спадковість властивості від свого батьківського елемента

автор: Svitlana

правити

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	21	91	7	15	79	—

Підтримка: мобільні переглядачі

Переглядач
	4.4	25	91	7

Приклади

+ запропонувати свій приклад у пісочниці

<pre class="t4">	tab-size: 4</pre>
<pre class="t16">	tab-size: 16</pre>

pre {
    border-left: 3px solid #0172ad;
}

.t4  { tab-size: 4; }
.t16 { tab-size: 16; }

<p>Встав адресу зображення:</p>

<input type="text" placeholder="url" id="field"></input>

<ul id="block">
  <li>Це елемент один</li>
  <li>Це елемент два</li>
  <li>Це елемент три</li>
</ul>

body {
	padding: 36px;
  text-align: center;
  line-height: 1.45;
  font-size: 20px;
  font-family: sans-serif;
}

#field {
  padding: 8px;
  font-size: 20px;
}

#block {
  text-align: left;
}

var block = document.getElementById('block');

document.getElementById('field').onchange = function () {
  block.style.listStyleImage = 'url("' + this.value + '")';
};
//# sourceURL=pen.js

<pre>
Normal
	tab
		size
</pre>

<pre class="small-tab">
Small
	tab
		size
</pre>

pre{
  font-size: 18px;
  border: 2px solid blue;
  padding: 20px;
  width: 50%;
}
.small-tab {
  background: yellow;
  -moz-tab-size: 2;
  tab-size: 2;
}

<p class="cap">tab-size: 8 (типове) — X стає на 8-му, 16-му, 24-му знаку:</p>
<pre class="t8">	X
ab	X
abcdefg	X
abcdefgh	X
abcdefghijklmnop	X</pre>

<p class="cap">tab-size: 4 — той самий текст, крок удвічі коротший:</p>
<pre class="t4">	X
ab	X
abcdefg	X
abcdefgh	X
abcdefghijklmnop	X</pre>

<p class="cap">tab-size: 20px — крок задано довжиною, а не знаками:</p>
<pre class="tpx">	X
ab	X
abcdefg	X</pre>

<p class="cap">tab-size: 0 — табуляція не займає місця:</p>
<pre class="t0">	X
ab	X</pre>

<p class="cap">Звичайний блок (white-space: normal) — властивість не діє:</p>
<div class="plain">	X — табуляція склеїлася з пробілами</div>

<p class="cap">У полі форми tab-size працює:</p>
<textarea rows="3" cols="30">	X
ab	X</textarea>

.cap {
    margin: 16px 0 4px;
    font: 600 .9em/1.4 system-ui, sans-serif;
    color: #5a6472;
}

pre,
.plain,
textarea {
    margin: 0;
    padding: 6px 8px;
    background: #eef1f5;
    border-left: 4px solid #2f6fd0;
    font: 14px/1.45 ui-monospace, monospace;
}

.t8 {
    tab-size: 8;
}

.t4 {
    tab-size: 4;
}

.tpx {
    tab-size: 20px;
}

.t0 {
    tab-size: 0;
}

.plain {
    white-space: normal;
    tab-size: 4;
}

textarea {
    tab-size: 4;
    border: 1px solid #b9c6d8;
    border-left: 4px solid #2f6fd0;
}