个人中心
gpt4 book ai didi

html - 和 标签之间的空格不显示

转载 作者：行者123 更新时间：2023-11-28 03:58:34 34 4
gpt4 key购买 nike

我有以下 HTML 文件。

<HTML>
<head>
</head>

<body>
    <div>
        <span>"|      Testing"</span>
    </div>
</body>

</HTML>

我要打印 "| Testing" , 而不是打印这个打印 "| Testing" .所有这些都发生了什么 spaces .

这段代码不是应该打印那些 <span> 之间的内容吗？标签？我做错了什么吗？

最佳答案

来自HTML4 specification关于空白字符(强调我的):

Note that a sequence of white spaces between words in the source document may result in an entirely different rendered inter-word spacing (except in the case of the PRE element). In particular, user agents should collapse input white space sequences when producing output inter-word space.

因此规范规定多个连续的空间应该折叠成一个。

“保留”连续空格有几个选项:

  • 使用 CSS to change the way how the browser renders the spaces ( demo ):

    span {
        white-space: pre-wrap;
    }

  • 您可以将空格编码为 &ensp;或 &emsp; (取决于你要插入的空格的宽度)( demo ) *.

  • 您可以使用 <pre> element ( demo ):

    <pre><span>"|      Testing"</span></pre>

    由于浏览器对 pre 的内容使用不同的字体元素，您还必须使用 CSS 将字体重置为页面其余部分使用的字体，例如 

    pre {
        font-family: serif;
    }

*: 你也可以使用 &nbsp;然而，对于 HTML 实体，此更改会影响浏览器的另一种行为:当内容太长而无法容纳元素的可用宽度时，浏览器会自动将内容按空格分开。 nbsp代表 *no-break_space*，因此当浏览器呈现空格时，它不会破坏上面溢出的内容 ( demo )。

关于html - <span> 和 </span> 标签之间的空格不显示，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22125887/

34 4 0
文章推荐： c++ - Boost regexp - 搜索结果的空终止
文章推荐： html - 粗体字 li
文章推荐： html - CSS，border-top 有 3 种颜色，可能吗？
文章推荐： javascript - 为什么 js 无法理解字符串 '</script>'？