可能性の重複：
Specifying Tab-Width?（PRE要素の）タブ文字をHTMLの4スペースとしてレンダリングしますか？
私はpreタグ内のタブ文字を印刷する必要があります。タブのHTML文字は	ですが、私が試したすべてのブラウザでは、8つの空白のように見えます。
これをレンダリングするために4つのスペースの幅に調整する方法はありますか、それとも4つのスペースを使用できる別のHTMLキャラクターがありますか？
、CSS内tab-sizeプロパティのいくつかのサポートがあるように思えるん：
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>タグ内）を使用すると有効です。
常に4つのスペースに拡張できる一連の4文字を使用できます。それは4つのスペース（少なくともpre以内で、他の要素は適切にスタイルされています）です。
タブの幅と正確な動作方法について普遍的に合意された方法はないので、出力がどのように見えるかを正確に制御する必要がある場所では使用しないことをお勧めします。 HTMLもブラウザもタブ幅を設定する手段を提供していません。私はあなたにもちょうど4つのスペースを置くかもしれない最初の答えに同意しながら（IEのサポートが欠けているが）
Pfft。 *誰もがタブが3つのスペースであることを知っています。 –
彼らは4つのスペースを必要とします。それについてはあまりできません。 – Joey
CSSは、視聴目的のためにこれを処理するための最良の方法です。しかし、人々がテキストをコピー/ペーストしてタブ用に4つのスペースを得ることができるようにするには、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（）関数です。
HTML仕様とブラウザの練習では、タブストップは8文字ごとです。これは、タブが8つのスペースであることを意味するものではありません。たとえば、ABC DEFがある場合、タブでは5文字の前進が行われます。
CSSでは、CSS3ドラフトで、set the “tab size”、つまりタブストップ間の距離などがあります。 tab-size: 4。 IEを除いて、ベンダープレフィックスも使用されると、ブラウザーのサポートはかなり良いです。
+1 'tab-size'のブラウザサポートは現在（[MDN]（https://developer.mozilla.org/en-US/docs/CSS/tab-size）によると）非常に限られていますが、 '-moz'接頭辞のバージョンはFFで長い間サポートされていましたが、Chomeは21日までOperaをサポートしていませんでした。10.6までIEはサポートしていないかもしれません。あなたが提供するデモはIE8ではうまくいきません。 – DaveRandom