Question

我正在尝试为跨度内的空白设置背景颜色。但是当空白跨度碰巧出现在换行时，它就不会显示出来。

HTML

asdfghjklkqowbvaa<span> </span>a

CSS

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

span {
  background-color: black;
}

JSFIDDLE

Answer 1

改变你的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

如果你在你的跨度上添加 ，那么你的空间上的字符串不会再破坏，而是将这两个部分“粘合”在一起，而不会将字符串包裹在空间上。

Answer 2

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

（有关详细信息，请参见here）

如何在跨度内显示空间

2 个答案: