注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

梦幻雪冰

技在手,能在身,思在脑,从容过生活——陈能堡

 
 
 

日志

 
 

word-spacing与letter-spacing的详解  

2014-08-20 23:36:46|  分类: HTML&&CSS |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

word-spacing与letter-spacing的详解---梦幻雪冰

今天就给大家来讲解下word-spacing与letter-spacing的基本使用,接下来写一个小例子:

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>梦幻雪冰</title>
<link rel="stylesheet" href="reset.css" type="text/css">
<style>
.con {
word-spacing: 20px;
}
</style>
</head>
<body>
<div class="con">梦幻雪冰~独行冰海</div>
<div class="con">meng huan xue bing~du xing bing hai</div>
</body>
</html>

测试结果如下:
word-spacing与letter-spacing的详解 - 梦幻雪冰 - 梦幻雪冰
 测试结果发现对中文好像没有生效,难道是我们设置错了?

修改测试的例子,把里面的文字“梦幻雪冰~”后面进行空格了

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>梦幻雪冰</title>
<link rel="stylesheet" href="reset.css" type="text/css">
<style>
.con {
word-spacing: 20px;
}
</style>
</head>
<body>
<div class="con">梦幻雪冰~ 独行冰海</div>
<div class="con">meng huan xue bing~du xing bing hai</div>
</body>
</html>

测试结果发现中文生效了
word-spacing与letter-spacing的详解 - 梦幻雪冰 - 梦幻雪冰
原因:说明浏览器把没空格的中文当成字母了,而word-spacing用于修改字间距离。这里的“字”,简单的说,可以是任何非空白字符组成的串,并由某种空白符包围。所以象形文字是无法指定字间隔的。除非字之间有空格。梦幻雪冰
 接下来来了解下letter-spacing,为了方便理解来写一个小例子:

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>梦幻雪冰</title>
<link rel="stylesheet" href="reset.css" type="text/css">
<style>
.con {
letter-spacing: 20px;
}
</style>
</head>
<body>
<div class="con">梦幻雪冰~独行冰海</div>
<div class="con">meng huan xue bing~du xing bing hai</div>
</body>
</html>

测试结果如下:
word-spacing与letter-spacing的详解 - 梦幻雪冰 - 梦幻雪冰
测试结果验证了刚刚上面的结论,没有空格的中文当成了字母,所以每一个字就是当作是字符了,所以letter-spacing对中文就有效了。梦幻雪冰
提示:word-spacing与letter-spacing属性值单位可以是px也可以是em。
欢迎学习交流----
梦幻雪冰
  评论这张
 
阅读(155)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017