我有以下HTML文件。
<HTML>
<head>
</head>
<body>
<div>
<span>"| Testing"</span>
</div>
</body>
</HTML>
我想打印"| Testing"，而是打印此打印"| Testing"。所有spaces会发生什么。
这段代码是不是要打印那些<span>标签之间的内容？我做错了吗？
答案 0 :(得分：7)
从HTML4 specification关于空格字符（强调我的）：
请注意，源文档中的单词之间的一系列空格可能会导致完全不同的渲染字间距（PRE元素除外）。特别是，用户代理在生成输出字间空间时应折叠输入空格序列。
因此规范要求将多个连续的空格折叠成一个。
“保留”连续空格有几个选项：
使用CSS to change the way how the browser renders the spaces（demo）：
span {
white-space: pre-wrap;
}
您可以将空格编码为 或 （取决于您要插入的空间的宽度）（demo）*。
您可以使用<pre> element（demo）：
<pre><span>"| Testing"</span></pre>
由于浏览器对pre元素的内容使用不同的字体，因此您还必须使用CSS将字体重置为页面其余部分使用的字体，例如。
pre {
font-family: serif;
}
*：您也可以使用 HTML实体，但是，此更改将是浏览器的另一种行为：当内容太长而无法容纳元素的可用宽度时，浏览器将自动中断空间的内容。 nbsp代表* no-break_space *，因此当浏览器呈现空格时，它不会破坏它们上面的溢出内容（demo）。
答案 1 :(得分：2)
使用 代替空格
<span>"| Testing"</span>
答案 2 :(得分：2)
HTML中的多个空格已折叠，仅显示为一个空格。这与你的换行不会全部显示并使你的文字混乱的原因相同。
您可以使用 代替空格来强制插入空格。例如：
<span>"| Testing"</span>
将显示为：
"| Testing"
答案 3 :(得分：2)
不要在你的HTML中使用 。添加一个css样式表，在你的范围内放一个类。在span元素中添加填充。
<span class="padd">Testing</span>
在样式表中
span.padd{padding-left:60px;}
你可以添加'|'在span标记之前或只使用span.padd{ border-left: 1px solid #000; }
答案 4 :(得分：1)
当浏览器将一系列空格字符视为等效于单个空格时，会发生什么。这一直是浏览器的行为方式以及HTML规范所说的内容。
有一些方法可以使用CSS或使用某些特殊的HTML元素来更改空格的处理。但是，最灵活的方法是使用CSS添加填充（或边距）。例如：
<style>
.bar { padding-right: 1.25em; }
</style>
...
<span>"<span class=bar>|</span> Testing"</span>
此示例中1.2em的值大致对应于五个空格的宽度（除空格字符引起的间距外还要使用）。空格的宽度因字体而异。但通常最好使用像em这样的单位来选择间距，而不是考虑空间数量。