CSS 文字间距 详解
css3基础 2022-05-23 12:03:19小码哥的IT人生shichen
CSS 文字间距
文字缩进
text-indent 属性用于指定文本第一行的缩进：
示例代码：
p {
text-indent: 50px;
}
完整实例【亲自试一试】：
<!DOCTYPE html>
<html>
<head>
<style>
p {
text-indent: 50px;
}
</style>
</head>
<body>
<p>In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since. 'Whenever you feel like criticizing anyone,' he told me, 'just remember that all the people in this world haven't had the advantages that you've had.'</p>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
字母间距
letter-spacing 属性用于指定文本中字符之间的间距。
下例演示如何增加或减少字符之间的间距：
示例代码：
h1 {
letter-spacing: 3px;
}
h2 {
letter-spacing: -3px;
}
完整实例【亲自试一试】：
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
letter-spacing: 3px;
}
h2 {
letter-spacing: -3px;
}
</style>
</head>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
行高
line-height 属性用于指定行之间的间距：
示例代码：
p.small {
line-height: 0.8;
}
p.big {
line-height: 1.8;
}
完整实例【亲自试一试】：
<!DOCTYPE html>
<html>
<head>
<style>
p.small {
line-height: 0.7;
}
p.big {
line-height: 1.8;
}
</style>
</head>
<body>
<p>
这是有标准行高的段落<br>
大多数浏览器中的默认行高大概是 110% 到 120%。<br>
</p>
<p class="small">
这是行高更小的段落。<br>
这是行高更小的段落。<br>
</p>
<p class="big">
这是行高更大的段落。<br>
这是行高更大的段落。<br>
</p>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
字间距
word-spacing 属性用于指定文本中单词之间的间距。
下例演示如何增加或减少单词之间的间距：
示例代码：
h1 {
word-spacing: 10px;
}
h2 {
word-spacing: -5px;
}
完整实例【亲自试一试】：
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
word-spacing: 10px;
}
h2 {
word-spacing: -5px;
}
</style>
</head>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
空白
white-space 属性指定元素内部空白的处理方式。
此例演示如何禁用元素内的文本换行：
示例代码：
p {
white-space: nowrap;
}
完整实例【亲自试一试】：
<!DOCTYPE html>
<html>
<head>
<style>
p {
white-space: nowrap;
}
</style>
</head>
<body>
<h2>空白</h2>
<p>
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
</p>
<p>请尝试删除 white-space 属性来看一下区别。</p>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
