65

空白が表示されるときにタブ幅を定義することは可能ですか (たとえば <pre> タグ内など)? CSSでこれを行う方法は何も見つかりませんが、これは非常に一般的なことのようです。

私の場合、タブの幅が非常に広いため、ページ上の一部のコード スニペットが広すぎます。どうにかしてタブ幅を短くして、スクロールバーなしで収まるようにできれば、作業がはるかに簡単になります。（タブをスペースに置き換えるだけでよいと思いますが、理想的には、それを行わずにこれを行う方法を見つけたいと思います）

4

3 に答える 3

100

tab-size プロパティを使用します。現在、ベンダー プレフィックスが必要です。例：

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>

于 2011-12-29T00:27:29.760 に答える
6

このブログ投稿が役立つと思います。

これは解決策です。タブのすべてのインスタンスに対して実行する必要があるため、きれいではありませんが、タブが占有するスペースが少なくなり、ブラウザーからコピーするための書式が保持されます (明らかに、「A SINGLE TAB HERE」を実際のタブの場合、このブログ ソフトウェアはエントリからタブを自動的に削除するようです):

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

基本的に、コード内のタブのすべてのインスタンスをそのコード スニペットに置き換えます (適切な幅を選択した後、スタイルシートで非常に簡単に行うことができます)。このコードは、コード内の元のタブをコピー/貼り付けの準備を整えたまま、人為的に余白を挿入します。

ちなみに、 CSS仕様tab stopsにしたみたいです。

この件に関する別のスタック オーバーフローの質問もあります。

于 2009-03-20T17:45:16.500 に答える
4

George Stocker が指摘したように、タブストップは将来の CSS で導入されるはずですが (FF4 には導入されるはずです)、それまでの間は...

リンクされたブログ投稿の問題は、ブラウザーからコピー/貼り付けするときにタブがコピーされないことです。別の方法として、次のことを試してください。

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

上記の「\t」は実際のタブ文字です。これで、適切にコピーして貼り付ける必要があります。<pre> タグに css プロパティを平手打ちするほどではありませんが、それが人生です。

（PSはこの古い投稿に「cssタブ幅」のGoogleで高いと答え、ここに来てすぐにこの解決策を思いつきました。）

于 2010-11-05T01:19:52.793 に答える