web-dev-qa-db-ja.com

タブ幅を指定しますか？

空白が表示されるときに（たとえば、<pre>タグ内などに）タブ幅を定義することはできますか？ CSSでこれを行うには何も見つかりませんが、これは、やりたいことはかなり一般的なことのようです。

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

htmlcssxhtmlwhitespace
62
Wilco

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

これが解決策です。タブのインスタンスごとに実行する必要があるため、見栄えがよくありませんが、タブが占めるスペースが少なくなり、ブラウザからコピーするためのフォーマットが保持されます（明らかに、「A SINGLE TAB HERE」を実際のタブ、このブログソフトウェアは、それが思われるエントリからタブを自動的に削除します）：

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

基本的に、コード内のタブのすべてのインスタンスをそのコードスニペットで置き換えます（適切な幅を選択した後は、スタイルシートで簡単に行うことができます）。コードは、コピー/貼り付けの準備ができているコードの元のタブを維持しながら、人為的にマージンを挿入します。

ちなみに、tab stopsを CSS仕様 にしました。

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

5
George Stocker

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

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>
97
fuxia

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タブ幅」の最高値として答えました、そして私はここに来て間もなくこの解決策を思いつきました。）

4
DaedalusFall