CSS white-space 属性-代码号

CSS white-space 属性详解：空白字符处理与文本换行控制

什么是 white-space 属性？

white-space 是 CSS 中用于控制元素内部空白字符处理方式和文本换行行为的重要属性。该属性决定了浏览器如何处理元素中的空格、制表符、换行符等空白字符，以及文本内容在容器边界处的换行方式。

属性值详解与行为特征

属性值功能说明

属性值	空白符处理	换行符处理	自动换行	文本换行
`normal`	合并	忽略	允许	允许
`nowrap`	合并	忽略	禁止	允许（仅标签）
`pre`	保留	保留	禁止	允许（仅换行符）
`pre-line`	合并	保留	允许	允许
`pre-wrap`	保留	保留	允许	允许

详细行为描述

normal（默认值）

连续的空白字符会被合并为一个空格
文本在必要时会自动换行
忽略原始的换行符

nowrap

合并连续的空白字符
禁止文本自动换行
文本只在 <br> 标签处换行

pre（保留格式）

保留所有空白字符（包括空格和换行符）
文本不会自动换行
行为类似于 HTML 的 <pre> 标签

pre-line

合并连续的空白字符
保留换行符
文本在必要时会自动换行

pre-wrap

保留所有空白字符
保留换行符
文本在必要时会自动换行

实战应用示例

示例1：代码展示与空白保留

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>代码号编程：white-space代码展示应用</title>
    <style>
        .code-container {
            background-color: #2c3e50;
            color: #ecf0f1;
            padding: 20px;
            border-radius: 8px;
            margin: 20px 0;
            font-family: 'Consolas', 'Monaco', monospace;
        }
        
        .pre-style {
            white-space: pre;
            line-height: 1.5;
        }
        
        .pre-wrap-style {
            white-space: pre-wrap;
            line-height: 1.5;
        }
        
        .code-example {
            background-color: #34495e;
            padding: 15px;
            border-left: 4px solid #3498db;
            margin: 15px 0;
        }
    </style>
</head>
<body>
    <div style="max-width: 800px; margin: 0 auto; padding: 20px;">
        <h2>代码号学习：white-space在代码展示中的应用</h2>
        
        <div class="code-container">
            <h3>pre 值演示（保留所有空白）</h3>
            <div class="pre-style">
function calculateSum(a, b) {
    // 这是一个计算函数
    const result = a + b;
    
    return result;
}

console.log(calculateSum(5, 10));
            </div>
        </div>
        
        <div class="code-container">
            <h3>pre-wrap 值演示（保留空白但自动换行）</h3>
            <div class="pre-wrap-style">
function calculateSum(a, b) {
    // 这是一个计算函数
    const result = a + b;
    
    return result;
}

console.log(calculateSum(5, 10));
            </div>
        </div>
        
        <div class="code-example">
            <strong>应用场景：</strong> 代码展示区域需要保留缩进和换行格式，确保代码的可读性。
        </div>
    </div>
</body>
</html>

示例2：文本截断与省略号效果

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>代码号教程：nowrap文本截断技术</title>
    <style>
        .text-container {
            width: 300px;
            border: 1px solid #ddd;
            padding: 15px;
            margin: 20px;
            font-family: 'Microsoft YaHei', sans-serif;
        }
        
        .truncate-text {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        
        .normal-text {
            white-space: normal;
        }
        
        .preview-card {
            display: flex;
            align-items: center;
            gap: 15px;
            padding: 15px;
            border: 1px solid #eee;
            border-radius: 8px;
            margin: 15px 0;
        }
        
        .card-img {
            width: 60px;
            height: 60px;
            object-fit: cover;
            border-radius: 5px;
            flex-shrink: 0;
        }
        
        .card-content {
            flex: 1;
            min-width: 0;
        }
    </style>
</head>
<body>
    <div style="max-width: 600px; margin: 0 auto; padding: 20px;">
        <h2>代码号编程学习：nowrap实现文本截断</h2>
        
        <div class="preview-card">
            <img src="https://www.ebingou.cn/biancheng/images/s1.jpg" alt="编程教程" class="card-img">
            <div class="card-content">
                <h4 class="truncate-text">JavaScript高级编程教程：从入门到精通的全栈开发指南</h4>
                <p class="truncate-text">本教程涵盖ES6+新特性、异步编程、模块化开发等前沿技术，帮助开发者全面提升编程能力</p>
            </div>
        </div>
        
        <div class="text-container">
            <h4>nowrap 效果：</h4>
            <p class="truncate-text">这是一段很长的文本内容，当使用white-space: nowrap时，文本不会换行并且会在容器边界处被截断显示省略号</p>
        </div>
        
        <div class="text-container">
            <h4>normal 效果：</h4>
            <p class="normal-text">这是一段很长的文本内容，当使用默认的white-space: normal时，文本会根据容器宽度自动换行显示完整内容</p>
        </div>
    </div>
</body>
</html>

示例3：响应式文本处理

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>代码号源码：响应式文本布局</title>
    <style>
        .responsive-article {
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            font-family: 'Microsoft YaHei', sans-serif;
            line-height: 1.6;
        }
        
        .code-block {
            background-color: #f8f9fa;
            border: 1px solid #e9ecef;
            padding: 15px;
            border-radius: 5px;
            margin: 15px 0;
            white-space: pre-wrap;
            font-family: 'Consolas', monospace;
            font-size: 14px;
        }
        
        .poetry-section {
            white-space: pre-line;
            font-style: italic;
            color: #6c757d;
            padding: 20px;
            background-color: #fff3cd;
            border-radius: 8px;
            margin: 20px 0;
        }
        
        @media (max-width: 768px) {
            .responsive-article {
                padding: 15px;
            }
            
            .code-block {
                white-space: pre;
                overflow-x: auto;
            }
        }
        
        @media (max-width: 480px) {
            .poetry-section {
                white-space: normal;
                font-size: 14px;
            }
        }
    </style>
</head>
<body>
    <article class="responsive-article">
        <h2>代码号编程：响应式文本处理策略</h2>
        
        <section>
            <h3>pre-line 值的应用</h3>
            <div class="poetry-section">
                静夜思
                
                床前明月光，疑是地上霜。
                举头望明月，低头思故乡。
                
                ——李白
            </div>
            <p>pre-line 值会合并连续空白符但保留换行符，适合诗歌等需要保留段落结构的文本。</p>
        </section>
        
        <section>
            <h3>响应式代码块处理</h3>
            <div class="code-block">
// 函数定义示例
function responsiveLayout() {
    const width = window.innerWidth;
    
    if (width < 768) {
        // 移动端布局逻辑
        console.log('移动端样式生效');
    } else {
        // 桌面端布局逻辑
        console.log('桌面端样式生效');
    }
}
            </div>
        </section>
        
        <section>
            <h3>实用场景说明</h3>
            <p>在不同屏幕尺寸下，通过媒体查询调整 white-space 值，可以优化文本的显示效果：</p>
            <ul>
                <li>大屏幕：使用 pre-wrap 保留格式</li>
                <li>中等屏幕：使用 pre-line 平衡格式与空间</li>
                <li>小屏幕：使用 normal 确保可读性</li>
            </ul>
        </section>
    </article>
</body>
</html>

本节课程知识要点

1. 空白字符处理策略

合并空白：normal、nowrap、pre-line 会合并连续空白符
保留空白：pre、pre-wrap 会保留所有空白字符
换行符处理：除 normal 和 nowrap 外，其他值都会保留换行符

2. 换行行为控制

自动换行：normal、pre-line、pre-wrap 允许文本自动换行
禁止换行：nowrap、pre 禁止文本自动换行
强制换行：使用 <br> 标签或换行符实现强制换行

3. 实用应用场景

代码展示：使用 pre 或 pre-wrap 保留代码格式
文本截断：结合 nowrap 与 text-overflow: ellipsis 实现省略号效果
诗歌排版：使用 pre-line 保留段落结构
响应式设计：通过媒体查询动态调整 white-space 值

4. 兼容性考虑

所有现代浏览器都支持 white-space 属性
考虑为老旧浏览器提供降级方案
测试在不同字体和语言环境下的显示效果

5. 性能优化建议

避免在大量文本上使用 pre 值
对于长文本内容，优先考虑可读性
在移动设备上谨慎使用禁止换行的设置

6. 实践组合

/* 代码块样式 */
.code-block {
    white-space: pre-wrap;
    word-break: break-word;
    overflow-wrap: break-word;
}

/* 单行文本截断 */
.truncate {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 多语言文本支持 */
.multilingual {
    white-space: normal;
    word-break: break-word;
}

通过掌握 white-space 属性的各种值和应用场景，开发者可以更好地控制网页文本的显示效果，提升内容的可读性和美观性。

本文标签：

CSS white-space 属性