[CSS教程]'word-spacing属性'是什么意思？与'letter-spacing 属性区别

在网站文章或者网页设计过程中，我们如果注意到一些英文字母有不同的变化，比如一些英文单词字母之间的间距发生了变化，或者说一些长段落的单词之间的间距有长有短，当然一般情况下，它们之间的距离不会太长，否则就影响美观以及阅读的舒适性，还有如果我们想要保留我们键盘上输入的空格，而不是用HTML转义字符，这能做到吗？其实是能的，但是很多时候我们会忽略掉white-space属性，而是使用HTML转义字符，这或许是转义字符更加专业以及更加灵活的原因吧。

word-spacing属性定义

word-spacing属性从字面意思上看是单词间距的意思，实际也就是这么回事。

word-spacing属性值有哪些？

normal     默认。定义单词间的标准空间。
length       定义单词间的固定空间。
inherit      规定应该从父元素继承 word-spacing 属性的值。

代码实现过程

<!DOCTYPE html>
<html>
<head>
         <title>css教程</title>
         <style type="text/css">
                     .transform{
                           text-transform: capitalize;
                           word-spacing: normal;
                     }
                     .transform1{
                           text-transform: uppercase;
                           word-spacing: 0.8em;
                     }
                     .transform2{
                           text-transform: lowercase;
                           word-spacing: inherit;
                     }     
                     .transform4
         </style>
</head>
<body>
      <div class="transform">
            this is a css, it`s very much
      </div>
      <div class="transform1">
            This IS a css, it`s very much
      </div>
      <div class="transform2">
            This is a css, it`s very much
      </div>
</body>
</html>

效果显示

letter-spacing 属性定义

字母间隔修改的是字符或字母之间的间隔，而不是单词的整体，这一点需要记住。

Letter-spacing属性值

normal     默认。规定字符间没有额外的空间。
length       定义字符间的固定空间（允许使用负值）。
inherit      规定应该从父元素继承 letter-spacing 属性的值。

代码实现过程

<html>
<head>
<script type="text/javascript" src="jquery.min.js"></script>
<style type="text/css">
  .css1{
   letter-spacing: 0.5em;
  }
  .css2{
    letter-spacing:normal;
  }
</style>
</head>
<body>
 
<div class="css1">The CSS is very good</div>
<div class="css2">The CSS is very good</div>
 
</body>
</html>

实现效果

注意事项：

1 word-spacing和letter-spacing 都可以使用负值，会往相反的方向靠拢，简单来说就是更加的紧致。
2 注意word-spacing对于中文字符并不敏感，而lettet-spacing对中文敏感。


<html>
<head>
<script type="text/javascript" src="jquery.min.js"></script>
<style type="text/css">
  .css1{
   word-spacing: 0.5em;
  }
 .css2{
    letter-spacing:0.5em;
  }
</style>
</head>
<body>
<div class="css1">我爱世界</div>
<div class="css2">我爱世界</div>
<div class="css3">The CSS is very good</div>
</body>
</html>

white-space 属性定义

相对来讲，这个属性用的比较少，原因就在于它不够灵活。它会影响到用户代理对源文档中的空格、换行和 tab 字符的处理。

white-space 属性值

值     空白符     换行符     自动换行
pre-line    合并         保留         允许
normal     合并         忽略         允许
nowrap    合并         忽略         不允许
pre   保留         保留         不允许
pre-wrap 保留         保留         允许

代码实现过程

<html>
<head>
<script type="text/javascript" src="jquery.min.js"></script>
<style type="text/css">
  .css1{
   white-space: pre;
  }

  .css2{
    white-space: pre-line;
  }
  .css3{
       white-space: pre-wrap;
  }
  .css4{
       white-space:nowrap;
  }

</style>
</head>
<body

<div class="css1">1我爱css 我爱静学网 我爱css3   
     我爱html</div><br/>
<div class="css2">2我爱css 我爱静学网
         我爱css3         我爱html</div><br/>
<div class="css3">3我爱css 我爱静学网
         我爱css3         我爱html</div><br/>
<div class="css4">4我爱世界              
    我爱静学网我爱java</div><br/>
<div class="css5">5The CSS is very good</div><br/>
</body>
</html>

实现效果