CSS 文本缩进和间距


目录

    显示目录


文本间距

在本章中,您将了解以下属性:

  • text-indent
  • letter-spacing
  • line-height
  • word-spacing
  • white-space

文本缩进

text-indent 属性用于指定文本第一行的缩进:

例子

p {
  text-indent: 50px;
}

自己尝试一下→

<!DOCTYPE html>
<html>
<head>
<style>
p {
  text-indent: 50px;
}
</style>
</head>
<body>

<h1>Using text-indent</h1>

<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>



字母间距

letter-spacing 属性用于指定文本中字符之间的间距。

以下示例演示如何增加或减少字符之间的间距:

例子

h1 {
  letter-spacing: 5px;
}
h2 {
  letter-spacing: -2px;
}

自己尝试一下→

<!DOCTYPE html>
<html>
<head>
<style>
h2 {
  letter-spacing: 5px;
}

h3 {
  letter-spacing: -2px;
}
</style>
</head>
<body>

<h1>Using letter-spacing</h1>

<h2>This is heading 1</h2>
<h3>This is heading 2</h3>

</body>
</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>

<h1>Using line-height</h1>

<p>
This is a paragraph with a standard line-height.<br>
The default line height in most browsers is about 110% to 120%.<br>
</p>

<p class="small">
This is a paragraph with a smaller line-height.<br>
This is a paragraph with a smaller line-height.<br>
</p>

<p class="big">
This is a paragraph with a bigger line-height.<br>
This is a paragraph with a bigger line-height.<br>
</p>

</body>
</html>




字间距

word-spacing 属性用于指定之间的空格 文本中的单词。

下面的例子演示了如何增加或减少之间的空间 字:

例子

 p.one {
  word-spacing: 10px;
}
p.two {
  word-spacing: -2px;
}

自己尝试一下→

<!DOCTYPE html>
<html>
<head>
<style>
p.one {
  word-spacing: 10px;
}

p.two {
  word-spacing: -2px;
}
</style>
</head>
<body>

<h1>Using word-spacing</h1>

<p>This is a paragraph with normal word spacing.</p>

<p class="one">This is a paragraph with larger word spacing.</p>

<p class="two">This is a paragraph with smaller word spacing.</p>

</body>
</html>



空白

white-space 属性指定如何处理元素内的空白。

此示例演示如何禁用元素内的文本换行:

例子

 p {
  white-space: nowrap;
}

自己尝试一下→

<!DOCTYPE html>
<html>
<head>
<style>
p {
  white-space: nowrap;
}
</style>
</head>
<body>

<h1>Using white-space</h1>

<p>
This is some text that will not wrap.
This is some text that will not wrap.
This is some text that will not wrap.
This is some text that will not wrap.
This is some text that will not wrap.
This is some text that will not wrap.
This is some text that will not wrap.
This is some text that will not wrap.
This is some text that will not wrap.
</p>

<p>Try to remove the white-space property to see the difference!</p>

</body>
</html>



CSS 文本间距属性

letter-spacing

指定文本中字符之间的间距

line-height

指定行高

text-indent

指定文本块中第一行的缩进

white-space

指定如何处理元素内的空白

word-spacing

指定文本中单词之间的间距