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>