letter-spacing 和 word-spacing 属性区别

简介:

letter-spacing属性

检索或设置对象中的字符之间的最小、最大和最佳间隙


使用场景:

该属性将指定的间隙添加到每个文字(包括单次内的每个字母)之后;

不能用于一行的开始和结束;


语法:letter-spacing: normal | <length> | <percentage>(css3)

normal:默认间隙

length:用长度指定间隔,可以为负值

percentage:用百分比指定间隔,可以为负值(css3)


兼容性:

wKiom1gzu56ByK3MAAAuKULwIXA205.png

示例:

HTML代码:

1
2
3
4
5
6
7
8
9
10
< ul  class = "test" >
     < li  class = "normal" >
         < strong >默认间隔</ strong >
         < p >默认情况下的文字间间隔</ p >
     </ li >
     < li  class = "length" >
         < strong >自定义的间隔大小</ strong >
         < p >自定义的文字间隔大小Hello world</ p >
     </ li >
</ ul >


CSS代码:

1
2
3
.test p{ border : 1px  solid  #000 ;}
. normal  p{ letter-spacing : normal ;}
.length p{ letter-spacing : 10px ;}


页面效果截图:

wKioL1gzvD3gDBjmAAAOpGWM_2Y777.png


word-spacing属性

检索或设置对象中的单词之间的最小、最大和最佳间隙


使用场景:

该属性将指定的间隙添加到每个单词(词内不发生)之后,但最后一个字将被排除在外

判断是否为单次的依据是单词间是否有空格


语法:word-spacing: normal | <length> | <percentage>(css3)

normal:默认间隙

length:用长度指定间隔,可以为负值

percentage:用百分比指定间隔,可以为负值(css3)


兼容性:

wKiom1gzvXbyUZWeAAAuKULwIXA152.png


示例:

HTML代码:

1
2
3
4
5
6
7
8
9
10
< ul  class = "test" >
     < li  class = "normal" >
         < strong >默认间隔</ strong >
         < p >how are you!</ p >
     </ li >
     < li  class = "length" >
         < strong >自定义的间隔大小</ strong >
         < p >how are you!</ p >
     </ li >
</ ul >


CSS代码:

1
2
3
.test p{ border : 1px  solid  #000 ;}
. normal  p{ word-spacing : normal ;}
.length p{ word-spacing : 20px ;}


页面效果截图:

wKioL1gzvcGDjKc5AAAKOB4AWTY213.png

本文转自   frwupeng517   51CTO博客,原文链接:http://blog.51cto.com/dapengtalk/1875351

相关文章
|
4月前
|
前端开发
css动画——文本飞入(通过letter-spacing实现)
css动画——文本飞入(通过letter-spacing实现)
24 0
|
前端开发
每日一学—CSS overflow与text-overflow与white-space属性
CSS overflow 属性可以控制内容溢出元素框时在对应的元素区间内添加滚动条。text-overflow 属性指定当文本溢出包含它的元素时,应该如何显示。可以设置溢出后,文本被剪切、显示省略号 (...) 或显示自定义字符串(不是所有浏览器都支持)。white-space属性指定元素内的空白怎样处理。
293 0
每日一学—CSS overflow与text-overflow与white-space属性
|
容器
【已解决】text-overflow: ellipsis; 不生效(除了white-space:nowrap;overflow: hidden;之外)
text-overflow: ellipsis; 不生效(除了white-space:nowrap;overflow: hidden;之外)
1135 0
用white-space:nowrap;解决中文标签换行问题
在web2.0的概念中,标签是个时常出现的东西,可是在设计时中文不象英文那样在表现标签云时表现的那么好,主要是中文词组的成为标签后,有时会出现长标签在标签云中被断行的问题。这个主要是用display:inline-block;这个属性~,具体代码如下:
368 0
|
前端开发
CSS - 行内元素的 padding、margin、width、height、line-height 是否无效?
CSS - 行内元素的 padding、margin、width、height、line-height 是否无效?
514 0
CSS - 行内元素的 padding、margin、width、height、line-height 是否无效?
letter
while (cin.eof() != true)  //cin.eof判断是否到达文件EOF,如果读取到EOF return true,读取到EOF则无法再次输入 while (cin.fail() == true)   while (ch != EOF)   EOF ASCII 字符编码 ...
830 0