CSS 文字间距
文字缩进
text-indent 属性用于指定文本第一行的缩进:
<!DOCTYPE html>
<html>
<head>
<style>
p {
text-indent: 50px;
}
</style>
</head>
<body>
<p>在我年幼脆弱的时候,父亲给了我一些建议,从那时起我就一直在想这些建议,他说“每当你想批评别人的时候,只要记住,这个世界上所有的人都没有你所拥有的优势。”</p>
</body>
</html>
字母间距
letter-spacing 属性用于指定文本中字符之间的间距。
下面的代码演示如何增加或减少字符之间的间距:
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
letter-spacing: 3px;
}
h2 {
letter-spacing: -3px;
}
</style>
</head>
<body>
<h1>这是标题 1</h1>
<h2>这是标题 2</h2>
</body>
</html>
行高
line-height 属性用于指定行之间的间距:
<!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>
字间距
word-spacing 属性用于指定文本中单词之间的间距。
下面代码演示如何增加或减少单词之间的间距:
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
word-spacing: 10px;
}
h2 {
word-spacing: -5px;
}
</style>
</head>
<body>
<h1>这是标题 1</h1>
<h2>这是标题 2</h2>
</body>
</html>
空白
white-space 属性指定元素内部空白的处理方式。
下面代码演示如何禁用元素内的文本换行:
<!DOCTYPE html>
<html>
<head>
<style>
p {
white-space: nowrap;
}
</style>
</head>
<body>
<h2>空白</h2>
<p>
这是一些文本。
这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
</p>
<p>请尝试删除 white-space 属性来看一下区别。</p>
</body>
</html>