如何在跨度内显示空间

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

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