作者:PAISONG_675 | 来源:互联网 | 2020-08-04 14:34
css文字与文字之间的间距怎么调整?相信有很多小伙伴都会有这样的疑问。本章就给大家介绍css设置文字间距的方法。有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助。
一、css word-spacing属性设置字间距(单词的间距)
word-spacing 属性增加或减少单词间的空白(即字间隔);在这个属性中,“字” 定义为由空白符包围的一个字符串。也就是说该属性是以空格为基准进行调节间距的,如果多个字母被连在一起,则会被word-spacing视为一个单词;如果汉字被空格分隔,则分隔的多个汉字就被视为不同的单词,word-spacing属性此时有效。
word-spacing的语法:
word-spacing:值;
该属性支持的属性值有:
normal:定义单词间的标准空间,默认值。
length:定义单词间的固定空间(长度值)。
inherit:规定应该从父元素继承 word-spacing 属性的值。
说明:
如果指定为长度值,会调整字之间的通常间隔;所以,normal 就等同于设置为 0。允许指定负长度值,这会让字之间挤得更紧。
我们来看一看word-spacing属性设置字间距的例子,直观的感受一下该属性是如何设置文字之间的间距的:
a b c d 你 好 a !
ab cd 你好a!
两个p标签里的内容是一样的,区别就在于第一个p标签里的每个字符都用空格隔开了,第二个p标签里不是每个都用空格隔开的,我们来看看设置间距 距离为20px后的效果图:
我们来看一看letter-spacing 属性设置字间距的例子:
a b c d 你 好 a !
ab cd 你好a!
效果图:
三、word-spacing属性与letter-spacing属性的简单比较
word-spacing属性
1、检索或设置对象中的单词之间插入的空格数,允许为负值。 该属性适用英文使用。
2、对于英文,如果多个字母被连在一起,则会被word-spacing视为一个单词;对汉字,如果汉字被空格分隔,则分隔的多个汉字就被视为不同的单词,word-spacing属性此时有效。
letter-spacing属性
1、设置对象中的文字之间的间隔.每一个中文文字以及英文字母之间,都被隔开了所设置的距离,此属性是控制字间距的。该属性是中英文都适用 ;
2、只对文字起作用 对于图片失效的;
3、对汉字是以一个字进行间隔的, 对于英文是以一个字母进行间隔的。
以上就是CSS如何设置文字间距?的详细内容,更多请关注 第一PHP社区 其它相关文章!