1. 云栖社区>
  2. PHP教程>
  3. 正文

letter-spacing 和 word-spacing 属性区别

作者:用户 来源:互联网 时间:2017-12-01 18:16:55

word属性区别spacing

letter-spacing 和 word-spacing 属性区别 - 摘要: 本文讲的是letter-spacing 和 word-spacing 属性区别, letter-spacing属性检索或设置对象中的字符之间的最小、最大和最佳间隙使用场景:该属性将指定的间隙添加到每个文字(包括单次内的每个字母)之后;不能用于一行的开始和结束;语法:letter-spacing: normal | &l

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

使用场景:该属性将指定的间隙添加到每个文字(包括单次内的每个字母)之后;不能用于一行的开始和结束;
语法:letter-spacing: normal | <length> | <percentage>(css3)
normal:默认间隙
length:用长度指定间隔,可以为负值percentage:用百分比指定间隔,可以为负值(css3)
兼容性:
letter-spacing 和 word-spacing 属性区别示例:HTML代码:
html;"><ul class="test"> <li class="normal"><strong>默认间隔</strong><p>默认情况下的文字间间隔</p> </li> <li class="length"><strong>自定义的间隔大小</strong><p>自定义的文字间隔大小Hello world</p> </li></ul>

CSS代码:
.test p{border:1px solid #000;}.normal p{letter-spacing:normal;}.length p{letter-spacing:10px;}

页面效果截图:
letter-spacing 和 word-spacing 属性区别
word-spacing属性检索或设置对象中的单词之间的最小、最大和最佳间隙

使用场景:该属性将指定的间隙添加到每个单词(词内不发生)之后,但最后一个字将被排除在外
判断是否为单次的依据是单词间是否有空格

语法:word-spacing: normal | <length> | <percentage>(css3)normal:默认间隙length:用长度指定间隔,可以为负值percentage:用百分比指定间隔,可以为负值(css3)
兼容性:
letter-spacing 和 word-spacing 属性区别
示例:HTML代码:
<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代码:
.test p{border:1px solid #000;}.normal p{word-spacing:normal;}.length p{word-spacing:20px;}

页面效果截图:
letter-spacing 和 word-spacing 属性区别

本文出自 “dapengtalk” 博客,请务必保留此出处http://dapengtalk.blog.51cto.com/11549574/1875351

以上是云栖社区小编为您精心准备的的内容,在云栖社区的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索word , 属性 , 区别 , spacing ,以便于您获取更多的相关知识。

弹性可伸缩的计算服务,助您降低 IT 成本,提升运维效率

40+云计算产品,6个月免费体验

现在注册,免费体验40+云产品,及域名优惠!

云服务器9.9元/月,大学必备