15

可能重复：
指定制表符宽度？

我需要在 pre 标签中打印一个制表符。选项卡的 HTML 字符是，	但在我尝试过的所有浏览器上，它都呈现为 8 个空格。

有没有办法调整它以呈现为 4 个空格的宽度，或者是否有另一个我可以使用的 HTML 字符是 4 个空格？

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: pre或white-space: pre-wrap（或在<pre>标签内）有效。

于 2012-10-02T23:54:22.860 回答
6

您可以使用一系列四个字符，它们总是扩展为四个空格。它是四个空格（pre至少在适当样式的其他元素内）。

由于没有普遍认可的方法来确定选项卡的宽度以及它的行为方式，因此最好不要在需要精确控制输出外观的地方使用它。HTML 和浏览器都没有提供任何设置选项卡宽度的方法。

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

CSS 是出于查看目的处理此问题的最佳方式。但是，如果您希望人们能够复制/粘贴文本并获得四个空格作为制表符，那么您最终将使用 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 回答