html - 跨度标签中未呈现的空间

标签 html

我有以下 HTML:

<html>

    <body>
           hi   hi    
           <br>
           <span>          hi   hi   </span>

    </body>
</html>

我的期望是 hi hi 之前会有空格，它们对应于跨度中它们之前的空格。但是，这些空间没有在 Chrome 中呈现:

为什么空格字符没有在我的 span 中呈现？

最佳答案

输出是一个 HTML 网页，在 HTML 中，多个空格被折叠成一个空格。标记开头和结尾的空格不可见。

你可以用 css 解决这个问题:

.showSpaces{
  white-space: pre;
}

并在html中设置类

<span class="showSpaces">          hi   hi   </span>

完整示例

.showSpaces{
  white-space: pre;
}

<html>

    <body class="showSpaces">
           hi   hi    
           <br>
           <span>          hi   hi   </span>

    </body>
</html>

另一种选择是使用 <pre> HTML 中的标签。

关于html - 跨度标签中未呈现的空间，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43476923/

相关文章：

javascript - 如何选择溢出省略号的开始位置