如何让跨度内的空间显示出来 [英] how to make space within span show up

问题描述

我试图为跨度内的空白设置背景颜色。但是当空白符合恰好在换行的时候，它不会显示出来。

HTML

  asdfghjklkqowbvaa< span> < / span> a 
  

CSS $ b

  body {
 font-family：monospace; 
 font-size：40px; 
} 
 
 span {
 background-color：black; 
} 
  

> JSFIDDLE

解决方案

改变你的css的跨度以显示空格，就像在< pre> 标记。
查看不同的空格选项

  span {
 background-color：black; 
 white-space：pre; 
 
 
 
 
 
 $ b 
从上面的资源中可以看到一个不错的表格 white-space 会执行： 
 
 
 新行空格和制表符文本换行
正常折叠折叠包装
 pre保留保留无包装
 nowrap折叠折叠无包装
预包装Preserve Preserve包装
预包装保留折叠包装
  
如果您为您的跨度添加& nbsp; ，则字符串不会在你的空间中破碎，而是将两部分粘合在一起，而不会将字符串包裹在空间中。
 
I'm trying to set background color for a whitespace within a span. But it won't show up when the whitespace span happens to be at the point when line wraps.

HTML
asdfghjklkqowbvaa<span> </span>a
CSS
body {
  font-family: monospace;
  font-size: 40px;
}

span {
  background-color: black;
}
JSFIDDLE
解决方案
Alter your css for the span to show white spaces, just like in the <pre> tag.
Take a look at the different white-space options
span {
    background-color: black;
    white-space:pre;
}
From the mentioned resource here is a nice table what the different options for white-space will do:
               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
If you add a &nbsp; to your span, the string will not break anymore on your space but instead 'glue' the two parts together, without wrapping the string on the space.

                        
这篇关于如何让跨度内的空间显示出来的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！