CSS教程
CSS进阶

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>
输出
 CSS word-spacing

示例

<!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>
输出
 CSS word-spacing
昵称: 邮箱:
Copyright © 2022 立地货 All Rights Reserved.
备案号:京ICP备14037608号-4