css word-spacing属性笔记

原创 国哥笔记  2017-12-27 19:16  阅读 1,693 views 次

word-spacing属性定义及用法

1、word-spacing属性是用来定义文本中字(空白符包围的字符串)与字之间空白的增加或减少,其实就是定义文本中空白符的占据的空间;

2、word-spacing属性是用来控制文本中空白符占据的空间,如果文本中没有出现空白符,该属性不起作用;

3、word-spacing属性经常用在英文文本中,因为英文中单词与单词中间都有一个空白符,该属性可以控制空白符占据的空间,用来调节单词与单词之间的距离,从而达到更好的阅读效果;

word-spacing属性值

  • normal:定义空白符的标准距离(默认);
  • length:定义空白符的距离;
  • inherit:规从父元素继承 word-spacing 属性的值。

语法格式:

word-spacing:normal / length / inherit;

实例1(增加空白符占据的空间):

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css word-spacing属性笔记</title>
<style>
#ws1{ word-spacing:normal;}
#ws2{ word-spacing:28px;}
</style>
<head/>
<body>
<p id="ws1"><span>标准距离:</span>css word-spacing 属性 笔记</p>
<p id="ws2"><span>增加距离:</span>css word-spacing 属性 笔记</p>
</body>
</htm

运行结果:

css word-spacing属性笔记

实例2(减少空白符占据的空间):

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css word-spacing属性笔记</title>
<style>
#ws1{ word-spacing:normal;}
#ws2{ word-spacing:-15px;}
</style>
<head/>
<body>
<p id="ws1"><span>标准距离:</span>css word-spacing 属性 笔记</p>
<p id="ws2"><span>减少距离:</span>css word-spacing 属性 笔记</p>
</body>
</html>

运行结果:

css word-spacing属性笔记

说明:word-spacing属性值允许为负数,如果负数过小,空白符两端的内容会重合。

更多css属性——>css属性大全

本文地址:https://www.ggbiji.com/css-word-spacing.html
版权声明:本文为 国哥笔记 原创/整理文章,欢迎分享,转载请注明出处!

发表评论


表情