深入理解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;执行的前后可以发现,执行后空格变得
更大了!!
- 深入理解letter-spacing和word-spacing2
- word-spacing和letter-spacing
- letter-spacing 和 word-spacing 待写
- css中的word-spacing和letter-spacing
- letter-spacing和word-spacing的区别
- letter-spacing和word-spacing的区别
- CSS文字控制之letter-spacing和word-spacing
- CSS----in, px, em, word-spacing, letter-spacing
- word-spacing
- word-spacing
- CSS letter-spacing 属性
- CSS--letter-spacing
- CSS word-spacing 属性
- word-break与word-wrap 和 word-spacing与white-space
- HTML5基础加强css样式篇(text-align,text-decoration,text-indent,text-transform,letter-spacing,word-spacin)(四)
- inline-block空隙--letter-spacing与字体大小/字体关系数据表
- letter-spacing 文字之间 间距 行距 line-height
- border-collapse 和 border-spacing
- ip段/数字,如192.168.0.1/24是什么意思?
- PHP5.6通过CURL上传图片@符无效的兼容问题
- XML用法实例详解
- Android SDK manager 设置
- 【MFC】:MFC如何给控件设计缺省值?
- 深入理解letter-spacing和word-spacing2
- LeetCode之旅(17)-Ugly Number
- hdu 4146 Flip Game【思维+暴力】
- [090626]痕 ~きずあと~【日文硬盘版】[痕+雫&Origin][全CG存档&攻略=日本语启动+打开存档补丁]
- NWERC 2012 Foul Play 构造 (uvaLive 6271 )
- 有哪些让你相见恨晚的 PPT 制作技术或知识?
- 全系统动态污点分析-概要
- 11. Container With Most Water
- 由二进制翻转问题引发的思考