在HTML中将制表符（在PRE元素中）呈现为4个空格？_Html

在HTML中将制表符（在PRE元素中）呈现为4个空格？

html

在HTML中将制表符（在PRE元素中）呈现为4个空格？,html,Html,可能重复：我需要在预标记中打印制表符。选项卡的HTML字符为但在所有浏览器上，我都尝试将其渲染为8个空格有没有办法将其调整为4个空格的宽度，或者我可以使用另一个HTML字符，即4个空格？有一系列四个字符可以使用，它们总是扩展到四个空格。它有四个空格（至少在pre中，其他元素的样式也适当）由于没有一种公认的方法来确定选项卡的宽度和行为，因此最好不要在需要精确控制输出外观的地方使用它。HTML和浏览器都不提供任何设置选项卡宽度的方法。虽然我同意第一个答案，即最好只放置4个空格，但CS

可能重复：

我需要在预标记中打印制表符。选项卡的HTML字符为

	但在所有浏览器上，我都尝试将其渲染为8个空格
有没有办法将其调整为4个空格的宽度，或者我可以使用另一个HTML字符，即4个空格？
有一系列四个字符可以使用，它们总是扩展到四个空格。它有四个空格（至少在pre
中，其他元素的样式也适当）
由于没有一种公认的方法来确定选项卡的宽度和行为，因此最好不要在需要精确控制输出外观的地方使用它。HTML和浏览器都不提供任何设置选项卡宽度的方法。
虽然我同意第一个答案，即最好只放置4个空格，但CSS中似乎确实支持选项卡大小属性（尽管缺少IE支持）：
仅使用空白：pre
或空白：pre-wrap
（或在
标记内）有效
<!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>





CSS是处理此问题的最佳方式，用于查看目的。但是，如果您希望人们能够复制/粘贴文本，并为一个选项卡获得四个空格，那么您最终将使用Javascript修改预标记

所有标签都有一点变化。
$（文档）.ready（函数（）{
$（“.downtab”）.each（函数（）{
var text=$（this.html（）.replace（/\t/g'）；
$（this）.html（文本）；
});
});

这里真正的神奇之处在于replace（）函数，它使用全局匹配的正则表达式。
根据HTML规范，在浏览器实践中，制表位每8个字符一次。这并不意味着选项卡是8个空格。例如，如果您有ABC DEF，则该选项卡会导致提前5个字符
在CSS中，通过CSS3草稿，您可以，即制表位之间的距离，例如制表位大小：4
。当使用供应商前缀时，浏览器支持相当好，IE除外。
Pfft。每个人都知道标签有3个空格，但是他们想要4个空格。+1尽管浏览器对选项卡大小的支持目前非常有限（根据）-他们声称-moz前缀版本在FF中已经支持很长时间了，但Chome直到21岁才支持它，Opera直到10.6才支持，IE可能根本不支持它。您提供的演示在IE8中肯定不起作用。我仍然想知道为什么浏览器将它们呈现得如此广泛。如此简单。正是我想要的。（在Mac上的Safari v12中工作正常）因此，开头的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>