word-spacing与letter-spacing在文字编辑中的应用

238月

word-spacing与letter-spacing在文字编辑中的应用

在对网页文本进行精细编辑时，需要应用到多方面的CSS属性设置，如垂直方向上的行距line-height，水平方向上的字距word-spacing和letter-spacing。word-spacing是指单词间隔，letter-spacing是指字母的间隔。下面我们来介绍下word-spacing与letter-spacing属性应用：

word-spacing属性：

语法：
word-spacing : normal | length

参数：
normal : 默认间距
length :由浮点数字和单位标识符组成的长度值，允许为负值。请参阅长度单位

说明：
检索或设置对象中的单词之间插入的空格数。对于IE4+而言仅在MAC平台上可用。
对应的脚本特性为wordSpacing。请参阅我编写的其他书目。

示例：
div { word-spacing : 10; }
div { word-spacing : 10px; }

检索或设置对象中的单词之间插入的空格数。由浮点数字和单位标识符组成的长度值，允许为负值。

设置word-spacing为15px的情况：
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”

“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“>
<html xmlns=”http://www.w3.org/1999/xhtml“>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″ />
<title>word-spacing与letter-spacing在文字编辑中的应用</title>
<style type=”text/css”>
p {word-spacing:15px;}
</style>
</head>
<body>
<p><a href=”http://blog.onlygrape.com/” target=”_blank”>CSS Web Design</a>onlygrape 网站建设</p>
</body>
</html>
由此我们看出，文字间的间隔并未增加，而词与词之间的间隔变为了15px

letter-spacing属性：

语法：
letter-spacing : normal | length

参数：
normal :默认间隔
length :由浮点数字和单位标识符组成的长度值，允许为负值。请参阅长度单位

说明：
检索或设置对象中的文字之间的间隔。
该属性将指定的间隔添加到每个文字之后，但最后一个字将被排除在外。
对应的脚本特性为letterSpacing。请参阅我编写的其他书目。

示例：
div {letter-spacing:6px; }
div {letter-spacing:0.5pt; }

检索或设置对象中的文字之间的间隔。
该属性将指定的间隔添加到每个文字之后，但最后一个字将被排除在外。
可以调整单词中每个字母（汉字）间的距离。
普通的字与字之间的间距可以用这个来控制实现。

设置letter-spacing为5px的情况：
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”

“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“>
<html xmlns=”http://www.w3.org/1999/xhtml“>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″ />
<title>word-spacing与letter-spacing在文字编辑中的应用</title>
<style type=”text/css”>
p {letter-spacing:5px;}
</style>
</head>
<body>
<p><a href=”http://blog.onlygrape.com/” target=”_blank”>CSS Web Design</a>onlygrape 网站建设</p>
</body>
</html>