在本章中,您将了解以下属性:
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>
指定文本中字符之间的间距
指定行高
指定文本块中第一行的缩进
指定如何处理元素内的空白
指定文本中单词之间的间距