css word-spacing和css letter-spacing的区别详解
2017-01-24 12:37

word-spacing的使用

word-spacing表示单词或者标签之间的间距距离。

word-spacing的可选值:normal,length(px,em)

.wscont{
    margin:12px;
    padding:12px;
    background:#f1f1f1;
    border:1px solid #bababa;
    font-size:13px;
    font-family: serif;
    line-height: 26px;
    color:#565656;
}
<div class="wscont">
    The skew() CSS function is a shear mapping,
     or transvection, 
     distorting each point of an element by a certain angle in each direction. 
     It is done by increasing each coordinate by a value proportionate to the specified angle and 
     to the distance to the origin. The more far from the origin, the more away the point is, 
     the greater will be the value added to it.
</div>

没有使用word-spacing时候的默认值是normal.效果如下:

wordspacing.png

加上word-spacing后如下:

.wscont{
    margin:12px;
    padding:12px;
    background:#f1f1f1;
    border:1px solid #bababa;
    font-size:13px;
    font-family: serif;
    line-height: 26px;
    color:#565656;
    word-spacing:12px;
}

效果如下:

wordspacinglength.png

word-spacing对汉字等方块笔画字是不起作用的,效果如下:

wordspacing2.png

word-spacing对英文起作用,对汉字不起作用,要想汉字起作用,就需要请letter-spacing出山了。

letter-spacing文字间距

还是上面的文字内容,我们添加letter-spcing来设置汉字的间距

.wscont{
    margin:12px;
    padding:12px;
    background:#f1f1f1;
    border:1px solid #bababa;
    font-size:13px;
    font-family: serif;
    line-height: 26px;
    color:#565656;
    word-spacing:12px;
    letter-spacing: 12px;
}

效果如下:

letterspacing.png

letter-spacing不只对汉字起作用,对英文也起作用,英文的字母间距也增大了。

所以letter-spacing使用的时候一定要注意汉字和英文分开。

我们把其中的英文去掉,全剩汉字。

.wscont{
    margin:12px;
    padding:12px;
    background:#f1f1f1;
    border:1px solid #bababa;
    font-size:13px;
    font-family: serif;
    line-height: 26px;
    color:#565656;
    letter-spacing: 12px;
}
<div class="wscont">
    妹纸前端,定时更新,前端的加油站.前端的各种样式,效果,脚本的原来,插件的实现等等,应有尽有。
</div>

效果如下:

letterspacing3.png

只在汉字文本中使用letter-spacing来增加文字间距,可以实现特定的排版效果。


原创文章,转载请注明来自:妹纸前端-www.webfront-js.com.
阅读(3568)
辛苦了,打赏喝个咖啡
微信
支付宝
妹纸前端
妹纸前端工作室 | 文章不断更新中
京ICP备16005385号-1