html - 如何使跨度内的空间显示出来

Question

我正在尝试为跨度内的空白设置背景颜色。但是当空白跨度恰好位于换行点时，它不会出现。

HTML

asdfghjklkqowbvaa<span> </span>a

CSS

body {
  font-family: monospace;
  font-size: 40px;
}

span {
  background-color: black;
}

JSFIDDLE

Answer 1

更改跨度的 CSS 以显示空格，就像在<pre>标签中一样。看看不同的空白选项

span {
    background-color: black;
    white-space:pre;
}

从上面提到的资源这里有一个很好的表格，不同的选项white-space会做什么：

               New lines    Spaces and tabs   Text wrapping
normal         Collapse     Collapse          Wrap
pre            Preserve     Preserve          No wrap
nowrap         Collapse     Collapse          No wrap
pre-wrap       Preserve     Preserve          Wrap
pre-line       Preserve     Collapse          Wrap

如果您将 a 添加 到您的跨度，则字符串将不会再在您的空间上断开，而是将两个部分“粘合”在一起，而不会将字符串包裹在空间上。

Answer 2

如果您出于任何原因不想依赖 CSS，另一种选择是使用不间断空格: 或  

（有关它的更多信息，请参见此处）