CSS word-spacing
此CSS属性用于控制单词之间的间距。使用此属性,我们可以增加或减少单词之间的间距。
它修改单词之间的间距。它与
letter-spacing 属性相似,但是此
CSS 并未指定各个字符之间的空格。属性定义了文本中单词之间的间隔。
word-spacing的较大的负值或正值将使该单词不可读。如果我们应用非常大的正值,那么它将导致单词的出现,如一系列未连接的单个单词。很大的负值会使单词彼此重叠,从而使单词无法识别。
语法
word-spacing: normal | length | initial | inherit;
属性值
normal:这是默认值,用于定义单词之间的常规间隔(0.25em)。
length:允许使用负值,它指定了单词之间的额外长度(以
pt、px、em、cm为单位)。
initial:用于将属性设置为其默认值。
inherit:它从其父元素继承值。
示例
<!DOCTYPE html>
<html>
<head>
<title>
CSS word-spacing Property
</title>
<style>
body {
text-align: center;
}
#space {
word-spacing: 40px;
}
p {
color: red;
font-weight: bold;
font-size: 20px;
}
</style>
</head>
<body>
<h1>The word-spacing Property</h1>
<div>
<h2>word-spacing: normal;</h2>
<p>
Welcome to the lidihuo.com
</p>
</div>
<div>
<h2>word-spacing: 40px;</h2>
<p id="space">
Welcome to the lidihuo.com
</p>
</div>
</body>
</html>
输出
示例
<!DOCTYPE html>
<html>
<head>
<title>
CSS word-spacing Property
</title>
<style>
body {
text-align: center;
}
#space {
word-spacing: 2cm;
}
#space1 {
word-spacing: -50px;
}
#space2 {
word-spacing: initial;
}
p {
color: red;
font-weight: bold;
font-size: 20px;
}
</style>
</head>
<body>
<h1>The word-spacing Property</h1>
<div>
<h2>word-spacing: 2cm;</h2>
<p id="space">
Welcome to the lidihuo.com
</p>
</div>
<div>
<h2>word-spacing: -50px;</h2>
<p id="space1">
Welcome to the lidihuo.com
</p>
</div>
<div>
<h2>word-spacing: initial;</h2>
<p id="space2">
Welcome to the lidihuo.com
</p>
</div>
</body>
</html>
输出