CSS 设置文字间距

一、css word-spacing属性设置字间距（单词的间距）

word-spacing 属性增加或减少单词间的空白（即字间隔）；在这个属性中，“字” 定义为由空白符包围的一个字符串。也就是说该属性是以空格为基准进行调节间距的，如果多个字母被连在一起，则会被word-spacing视为一个单词；如果汉字被空格分隔，则分隔的多个汉字就被视为不同的单词，word-spacing属性此时有效。

语法：word-spacing:值;

normal：定义单词间的标准空间，默认值。
length：定义单词间的固定空间（长度值）。
inherit：规定应该从父元素继承 word-spacing 属性的值。

说明：

如果指定为长度值，会调整字之间的通常间隔；所以，normal 就等同于设置为 0。允许指定负长度值，这会让字之间挤得更紧。

两个p标签里的内容是一样的，区别就在于第一个p标签里的每个字符都用空格隔开了，第二个p标签里不是每个都用空格隔开的，我们来看看设置间距距离为20px后的效果图：

二、css letter-spacing属性设置字间距

letter-spacing 属性增加或减少字符间的空白（字符间距），该属性定义了在文本字符框之间插入多少空间。由于字符字形通常比其字符框要窄，指定长度值时，会调整字母之间通常的间隔。因此，normal 就相当于值为 0。

对于这个属性来说：每一个中文文字作为一个“字”，而每一个英文字母也作为一个“字”！。

属性：该属性所支持的属性值与word-spacing属性相似，可以参考word-spacing属性。

效果图：

如上：与word-spacing 属性相比，letter-spacing属性无论有没有把每个字符字母等用空格隔开都设置了其文字与左右文字的间距，甚至连空格字符与其他字符之间也设置了间距。

三、word-spacing属性与letter-spacing属性的简单比较
word-spacing属性
1、检索或设置对象中的单词之间插入的空格数，允许为负值。该属性适用英文使用。
2、对于英文，如果多个字母被连在一起，则会被word-spacing视为一个单词；对汉字，如果汉字被空格分隔，则分隔的多个汉字就被视为不同的单词，word-spacing属性此时有效。

letter-spacing属性
1、设置对象中的文字之间的间隔.每一个中文文字以及英文字母之间，都被隔开了所设置的距离，此属性是控制字间距的。该属性是中英文都适用；
2、只对文字起作用对于图片失效的；
3、对汉字是以一个字进行间隔的，对于英文是以一个字母进行间隔的。

CSS 设置文字间距相关推荐

PHP字体间距设置,CSS如何设置文字间距？
css文字与文字之间的间距怎么调整?相信有很多小伙伴都会有这样的疑问.本章就给大家介绍css设置文字间距的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助. 一.css word- ...
PHP文字间距怎么调,在html中怎么设置文字间距
在html中,可以使用letter-spacing属性设置文字间距,该属性可以增加或减少字符间的空白(字符间距),只需要给包含文字的元素添加"letter-spacing:间距值;" ...
php 自定义行间距,CSS设置文字行间距的方法介绍（代码示例）
本篇文章的内容是关于CSS设置文字行间距的方法介绍,内容很详细,有需要的朋友可以参考一下. 对于行间距的设置肯定是需要行高属性line-height来设置间距.(相关推荐:CSS学习手册) 指定绝对值 ...
css设置字符间距后无法完全居中问题
有时,使用中文作为标题,字符间距按默认的话会显得文字拥挤,使用css属性letter-spacing可以设置文字间距.但是会出现如上图所示的问题,因为letter-spacing在每个字符的右侧加了一 ...
CSS设置文字的划线
CSS设置文字的划线文字加上下划线.顶划线和删除线,在文档中是经常使用的. CSS中通过设置文字的text-decoration属性,来实现这些特殊的效果. <span style=" ...
php css下划线,css下划线如何设置？css设置文字下划线的方法介绍
在网页中默认情况下文字字体是没有下划线样式的,但是有时候我们在网页中会看到不是链接的文字下面会有一行下划线,那么这个下划线样式是怎么实现的呢?本篇文章就来给大家介绍一下css设置文字下划线的方法,接下 ...
AUTOCAD——设置文字间距与行距
快速调整多行文字的文字间距与行距. 执行方式 1.输入命令多行文字命令"MTEXT"(快捷键:T),根据提示"指定对角点或"输入文字高度. 2.输入文字,绘制多 ...
CSS 设置文字只显示一行，多余显示省略号
CSS 设置文字只显示一行,多余显示省略号 .view-text{/**思路:1.设置inline-block属相2.强制不换行3.固定高度4.隐藏超出部分5.显示"--"*/di ...
如何用css设置文字的聚光灯效果
要用 CSS 设置文字的聚光灯效果,你可以使用 text-shadow 属性. 例如: .highlighted {text-shadow: 0 0 5px #ffff00; } 在这个例子中,我们为 ...
css设置文字溢出隐藏
css设置文字溢出隐藏让文字只显示一行,超出显示省略号多行文本, 显示 n 行,剩下的省略号替代仅仅是用来提示自己,不要忘记的让文字只显示一行,超出显示省略号 overflow: hidden ...

CSS 设置文字间距

CSS 设置文字间距相关推荐

最新文章

热门文章