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

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

如果你添加一个   到你的跨度上，字符串就不会再在你的空格上断裂，而是将两个部分 "粘 "在一起，而不会将字符串包裹在空格上。

Answer 2

如果你不想因为任何原因依赖CSS，另一个选择是使用 不破裂空间:  ,   或  

(见 此处 了解更多信息)