深入理解letter-spacing和word-spacing2

来源:互联网 发布:远盾网络 编辑:程序博客网 时间:2024/05/29 13:51



               综述:笔者以前一直使用的是letter-spacing,但是最近复习W3C文档的时候,偶尔发现了一个新的CSS属性                             word-spacing


          (1)letter-spacing


               我们经常使用的是letter-spacing

               首先来看英文:

               <p>

                   thisisatest

              </p>

               如果此时我们设置p内容段落标签的属性为letter-spacing:10px;


                显示效果为:

               t  h  i  s  a  t  e s t

               再来看中文:

               <p>

                  这是一个测试

               </p>

               同时设置p内容段落的标签属性为letter-spacing:10px;

               显示的效果为:

                这   是   一   个   测   试


               总结:letter,顾名思义,是字母的意思,设置了letter-spacing:10px;就是单个字母的间隔为10px;对于

               英文而言,字母的意思就是单个字母,对于中文而言,单个中文字就是一个中文字母。


            (2)word-spacing

              同样我们来看英文:

              <p>

                this is a  test

              </p>

              同样的我们设置word-spacing:10px;

              显示的效果为:

               this   is    a     test

               再来看中文的效果:

               <p>

                这  是   一   个  测  试

               </p>

               同样设置word-spacing:10px;

               显示的效果为:

               这     是      一      个     测    试

                 

               总结:word-spacing意思是设置单词间的间距,如何区别是不是为一个单词呢,这里我们可以看出

               用空格隔开的为一个单词,所以在执行word-spacing:10px;执行的前后可以发现,执行后空格变得

               更大了!!


               

0 0
原创粉丝点击