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

Question

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

HTML

asdfghjklkqowbvaa<span> </span>a

CSS

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

span {
  background-color: black;
}

JSFIDDLE

Answer 1

改变 span 的 css 以显示空格，就像在 <pre> 中一样标签。看看不一样的white-space options

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

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