段落・折り返し
tab-size
tab-size は、タブ文字 1 つの幅を決めます。数で書くと空白何文字分か、長さで書くとその幅になります。コードを表示するときの字下げの幅をそろえるのによく使います。
構文
<number [0,∞]> | <length [0,∞]>プレビュー
if (ok) {
for (x of xs) {
log(x)
}
}
プリセット
右下の角をドラッグするとサイズを変えられます
コード
.box {
white-space: pre;
font-family: monospace;
tab-size: 4;
}コントロール
tab-size4
if (ok) {
for (x of xs) {
log(x)
}
}
解説
値の書き方
4などの数：空白（U+0020）何文字分の幅にするか。初期値は8です。2emなどの長さ：その幅にします。
タブを残したときだけ効く
ふつうタブは空白と同じく 1 つの空白にまとめられてしまうので、tab-size は効きません。white-space: pre や pre-wrap でタブを残したときや、<pre> の中で効きます。このページのプレビューでは white-space: pre を書いて、タブで字下げしたコードを出しています。数で決める幅は空白の字幅が基準になるので、字幅のそろう等幅のフォント（font-family: monospace）にして、何文字分かを数えやすくしています。
タブは「次のタブの位置まで進む」文字なので、行の途中にあるタブは、決めた幅より短くなることがあります。