css word-spacing单词间距与letter-spacing字符间距的区别

时间:2016-07-06
css word-spacing属性用于设置单词间距,letter-spacing属性字符间距,本文章通过实例向大家介绍css word-spacing与letter-spacing的区别,需要的朋友可以参考一下。

letter-spacing控制的是字间距,每一个中文文字作为一个“字”,而每一个英文字母也作为一个“字”!大家要细心留意一下。

默认情况下,letter-spacing我们几乎都用不上,我们直接采用浏览器默认样式就可以了。大家完全可以忽略掉这个属性。

下面来看一下css letter-spacing实例:

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>letter-spacing属性</title>
    <style type="text/css">
        #p1{letter-spacing:0px;}
        #p2{letter-spacing:3px;}
        #p3{letter-spacing:5px;}
    </style>
</head>
<body>
    <p id="p1">学习CSS请到码农教程。</p><hr/>
    <p id="p2">学习CSS请到码农教程。</p><hr/>
    <p id="p3">学习CSS请到码农教程。</p>
</body>
</html>

运行结果如图:

letter-spacing字符间距实例

css word-spacing定义词间距,以空格为基准进行调节,如果多个单词被连在一起,则被word-spacing视为一个单词;如果汉字被空格分隔,则分隔的多个汉字就被视为不同的单词,word-spacing属性此时有效。

下面来看一下css word-spacing实例:

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>word-spacing属性</title>
    <style type="text/css">
        #p1{word-spacing:0px;}
        #p2{word-spacing:10px;}
        #p3{word-spacing:30px;}
    </style>
</head>
<body>
    <p id="p1">学习CSS请到码农教程。my name is wxp</p><hr/>
    <p id="p2">学习CSS请到码农教程。my name is wxp</p><hr/>
    <p id="p3">学习CSS请到码农教程。my name is wxp</p>
</body>
</html>

运行结果如图:

css word-spacing实例

上一页 下一页

原文地址:http://www.manongjc.com/article/1159.html