css字体空格

CSS 字体空格基础概念

CSS 字体空格主要涉及到文本的排版和间距控制。在 CSS 中，可以通过 white-space 属性来控制文本中的空白字符（如空格、制表符、换行符等）的处理方式。

类型

white-space 属性有以下几种值：

normal：默认值，空白会被浏览器忽略。
nowrap：文本不会换行，文本会在同一行上继续，直到遇到 <br> 标签为止。
pre：空白会被浏览器保留，其行为方式类似 HTML 的 <pre> 标签。
pre-wrap：保留空白符序列，但是文本会换行到下一行。
pre-line：合并空白符序列，但是文本会换行到下一行。

应用场景

代码展示：在展示代码时，使用 white-space: pre; 可以保留代码中的空格和换行，使代码格式保持原样。
段落排版：在排版文章时，使用 white-space: pre-wrap; 可以保留段落中的空格，同时允许文本在需要时换行。
标题对齐：在标题中使用 white-space: nowrap; 可以防止标题文本换行，保持标题的完整性。

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS 字体空格示例</title>
    <style>
        .code {
            white-space: pre;
            background-color: #f0f0f0;
            padding: 10px;
        }
        .paragraph {
            white-space: pre-wrap;
            margin: 20px 0;
        }
        .title {
            white-space: nowrap;
            font-size: 24px;
            color: #333;
        }
    </style>
</head>
<body>
    <div class="title">这是一个不会换行的标题</div>
    <div class="paragraph">
        这是一个段落，空白会被保留，但是文本会在需要时换行。
        这是一个段落，空白会被保留，但是文本会在需要时换行。
    </div>
    <div class="code">
        function greet(name) {
            console.log("Hello, " + name + "!");
        }
    </div>
</body>
</html>