15

重複の可能性:
タブ幅を指定していますか?

preタグにタブ文字を印刷する必要があります。タブの HTML 文字です	が、すべてのブラウザーで 8 つのスペースのようにレンダリングしようとしました。

これを調整して 4 つのスペースの幅になるようにレンダリングする方法はありますか、それとも 4 つのスペースで使用できる別の HTML 文字がありますか?

4

4 に答える 4

33

スペースを 4 つ入れたほうがよいという最初の回答には同意しますが、tab-sizeCSS 内のプロパティがサポートされているようです (ただし、IE のサポートは不足しています)。

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: preor white-space: pre-wrap(または<pre>タグ内)を使用した場合のみ有効です。

于 2012-10-02T23:54:22.860 に答える
6

使用できる一連の 4 文字があり、常に 4 つのスペースに拡張されます。これは 4 つのスペースです (pre少なくとも および適切にスタイル設定されたその他の要素内)。

タブの幅とタブの正確な動作について一般的に合意された方法はないため、出力の外観を正確に制御する必要がある場所では使用しないことをお勧めします。HTML もブラウザも、タブ幅を設定する手段を提供していません。

于 2012-10-02T23:40:34.720 に答える
3
于 2012-10-03T06:11:39.133 に答える
1

CSSは、表示目的でこれを処理するための最良の方法です。ただし、テキストをコピーして貼り付け、タブに4つのスペースを確保できるようにする場合は、Javascriptを使用してpreタグを変更することになります。

<!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（）関数です。

于 2012-10-03T00:08:07.903 に答える