word-spacing与white-space

1.word-spacing

不要被表面意思误导,word-spacing指的是字符“空格”的间隙。如果一段文字中没有空格,则该属性无效。下面代码设定空格间隙是20px,也就是说空格现在占据的宽度是原有的空格宽度+20px的宽度:

<p>这 空   格     ,会一样吗?</p>
<style>
  p {
    word-spacing: 30px;
  }
</style>

 可以看到最终都是在有空格(不管多少个只认一个)的地方加了30px

2.white-space

我们都知道如果在html中输入多个空白符,默认会被当成一个空白符处理,实际上就是这个属性控制的:

  1. normal:合并空白符和换行符;

  2. nowrap:合并空白符,但不许换行;

  3. pre:不合并空白符,并且只在有换行符的地方换行;

  4. pre-wrap:不合并空白符,允许换行符换行和文本自动换行;

猜你喜欢

转载自www.cnblogs.com/bobo1/p/12383352.html