您现在位置> 首页 > 编程 > HTML CSS > CSS
← CSS height 高度 CSS box-shadow 属性 →

CSS word-wrap 换行

著
原创 2025-09-05 CSS 已有人查阅

CSS word-wrap 属性详解：长单词换行与文本溢出处理

什么是 word-wrap 属性？

word-wrap 是 CSS 中用于控制长单词或不可断字符串换行行为的重要属性。该属性专门处理那些超出容器宽度的连续字符串，通过在适当位置断行来防止文本内容溢出容器边界。

注意：在现代 CSS 规范中，word-wrap 实际上是 overflow-wrap 属性的别名。虽然大多数浏览器仍然支持 word-wrap，但建议使用标准的 overflow-wrap 属性。

属性值详解与语法

基本语法

selector {
    word-wrap: value;
    /* 或使用标准属性 */
    overflow-wrap: value;
}

属性值说明

属性值 描述说明 使用场景
normal 只在允许的断点处换行 默认行为，适合普通文本
break-word 允许在单词内换行 处理长单词和URL等不可断字符串
anywhere 在任何字符间换行 更激进的换行策略（CSS3新增）
initial 设置为属性默认值 重置换行行为
inherit 继承父元素的属性值 保持样式一致性

相关属性对比

word-wrap vs word-break vs overflow-wrap

属性 作用 特点
word-wrap 处理长单词换行 传统属性，现代浏览器中作为别名
overflow-wrap 处理长单词换行 标准属性，推荐使用
word-break 控制所有文本换行 更激进的换行策略，包括CJK文本

实战应用示例

示例1：基础长单词换行处理

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>代码号编程：word-wrap基础应用</title>
    <style>
        .container {
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            font-family: 'Microsoft YaHei', sans-serif;
            line-height: 1.6;
        }
        
        .text-box {
            width: 300px;
            background-color: #e3f2fd;
            border: 2px solid #2196f3;
            padding: 15px;
            margin: 20px 0;
            border-radius: 5px;
        }
        
        .normal-wrap {
            word-wrap: normal;
            overflow-wrap: normal;
        }
        
        .break-word {
            word-wrap: break-word;
            overflow-wrap: break-word;
        }
        
        .code-sample {
            background-color: #f5f5f5;
            padding: 15px;
            border-left: 4px solid #2196f3;
            margin: 15px 0;
            font-family: 'Consolas', monospace;
        }
    </style>
</head>
<body>
    <div class="container">
        <h2>代码号学习：CSS word-wrap属性详解</h2>
        
        <div class="code-sample">
/* 正常换行行为 */
.normal-text {
    word-wrap: normal;
    overflow-wrap: normal;
}

/* 允许单词内换行 */
.break-text {
    word-wrap: break-word;
    overflow-wrap: break-word;
}
        </div>
        
        <h3>正常换行模式（word-wrap: normal）</h3>
        <div class="text-box normal-wrap">
            <p>这个超长的技术术语：HTML5AndCSS3ResponsiveWebDesignFramework 会溢出容器，因为它在默认情况下不会在单词内换行。</p>
            <p>网址示例：https://www.ebingou.cn/biancheng/advanced-tutorials</p>
        </div>
        
        <h3>单词断行模式（word-wrap: break-word）</h3>
        <div class="text-box break-word">
            <p>这个超长的技术术语：HTML5AndCSS3ResponsiveWebDesignFramework 现在会在适当位置换行，避免溢出容器。</p>
            <p>网址示例：https://www.ebingou.cn/biancheng/advanced-tutorials</p>
        </div>
    </div>
</body>
</html>

示例2：响应式布局中的文本处理

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>代码号教程：响应式文本换行</title>
    <style>
        .responsive-design {
            max-width: 1000px;
            margin: 0 auto;
            padding: 20px;
            font-family: 'Microsoft YaHei', sans-serif;
        }
        
        .card {
            background: white;
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
            padding: 20px;
            margin: 15px 0;
            border: 1px solid #e0e0e0;
        }
        
        .url-display {
            width: 100%;
            padding: 12px;
            background: #f8f9fa;
            border: 1px solid #ddd;
            border-radius: 4px;
            margin: 10px 0;
            overflow-wrap: break-word;
            word-wrap: break-word;
        }
        
        .code-block {
            background: #2d3748;
            color: #e2e8f0;
            padding: 15px;
            border-radius: 5px;
            margin: 15px 0;
            overflow-x: auto;
            font-family: 'Consolas', monospace;
        }
        
        .technical-term {
            color: #e53e3e;
            font-weight: bold;
        }
        
        /* 响应式设计 */
        @media (max-width: 768px) {
            .card {
                padding: 15px;
            }
            
            .url-display {
                font-size: 14px;
            }
        }
        
        @media (max-width: 480px) {
            .responsive-design {
                padding: 15px;
            }
            
            .url-display {
                word-break: break-all;
            }
        }
    </style>
</head>
<body>
    <div class="responsive-design">
        <h2>代码号编程学习：响应式文本换行处理</h2>
        
        <div class="card">
            <h3>URL地址换行处理</h3>
            <div class="url-display">
                https://www.ebingou.cn/biancheng/css-tutorial/word-wrap-property-examples-and-best-practices
            </div>
            <p>在响应式设计中，长URL地址需要特殊处理以避免布局错乱。</p>
        </div>
        
        <div class="card">
            <h3>技术术语处理</h3>
            <p>在编程学习中，经常会遇到长技术术语：</p>
            <p class="technical-term">JavaScriptObjectNotationXMLHttpRequestWebSocketConnection</p>
            <p>使用 <code>overflow-wrap: break-word</code> 可确保这些术语正确换行。</p>
        </div>
        
        <div class="code-block">
/* 响应式文本换行策略 */
.responsive-text {
    /* 标准属性 */
    overflow-wrap: break-word;
    /* 兼容旧浏览器 */
    word-wrap: break-word;
    /* 移动端更激进的换行策略 */
    word-break: break-word;
}

@media (max-width: 480px) {
    .responsive-text {
        word-break: break-all;
    }
}
        </div>
    </div>
</body>
</html>

示例3：表格和表单中的文本换行

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>代码号源码：表格表单文本处理</title>
    <style>
        .data-container {
            max-width: 900px;
            margin: 0 auto;
            padding: 20px;
            font-family: 'Microsoft YaHei', sans-serif;
        }
        
        .data-table {
            width: 100%;
            border-collapse: collapse;
            margin: 20px 0;
        }
        
        .data-table th,
        .data-table td {
            border: 1px solid #ddd;
            padding: 12px;
            text-align: left;
        }
        
        .data-table th {
            background-color: #34495e;
            color: white;
        }
        
        .wrap-cell {
            overflow-wrap: break-word;
            word-wrap: break-word;
            max-width: 200px;
        }
        
        .form-group {
            margin: 20px 0;
        }
        
        .form-input {
            width: 100%;
            padding: 12px;
            border: 1px solid #ddd;
            border-radius: 4px;
            margin: 5px 0;
        }
        
        .form-label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
        }
        
        .preview-box {
            background: #f8f9fa;
            padding: 15px;
            border: 1px solid #e9ecef;
            border-radius: 4px;
            margin: 10px 0;
            overflow-wrap: break-word;
        }
        
        .best-practice {
            background: #d4edda;
            border: 1px solid #c3e6cb;
            color: #155724;
            padding: 15px;
            border-radius: 4px;
            margin: 15px 0;
        }
    </style>
</head>
<body>
    <div class="data-container">
        <h2>代码号编程：表格与表单文本换行实战</h2>
        
        <div class="best-practice">
            <strong>实践：</strong> 在数据展示场景中，合理使用文本换行可以显著提升用户体验和数据可读性。
        </div>
        
        <h3>数据表格中的长文本处理</h3>
        <table class="data-table">
            <thead>
                <tr>
                    <th style="width: 20%;">ID</th>
                    <th style="width: 40%;">长URL地址</th>
                    <th style="width: 40%;">技术描述</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>001</td>
                    <td class="wrap-cell">https://www.ebingou.cn/biancheng/css/word-wrap/examples</td>
                    <td class="wrap-cell">CSS3WordWrapPropertyImplementationExample</td>
                </tr>
                <tr>
                    <td>002</td>
                    <td class="wrap-cell">https://www.ebingou.cn/tutorials/responsive-design/techniques</td>
                    <td class="wrap-cell">ResponsiveWebDesignBreakpointManagementSystem</td>
                </tr>
            </tbody>
        </table>
        
        <h3>表单输入预览</h3>
        <div class="form-group">
            <label class="form-label">输入长URL地址：</label>
            <input type="url" class="form-input" placeholder="https://www.ebingou.cn/...">
            <div class="preview-box">
                预览区域：长URL将在这里显示换行效果
            </div>
        </div>
        
        <div class="form-group">
            <label class="form-label">输入技术术语：</label>
            <input type="text" class="form-input" placeholder="例如：JavaScriptXMLHttpRequest...">
            <div class="preview-box">
                预览区域：长技术术语将在这里显示换行效果
            </div>
        </div>
    </div>
</body>
</html>

本节课程知识要点

1. 属性选择策略

  • 推荐使用 overflow-wrap：标准属性，向前兼容

  • 兼容性考虑：同时设置 word-wrap 确保旧浏览器支持

  • 区别理解：word-wrap 与 word-break 的不同应用场景

2. 响应式设计应用

  • 移动端优先的换行策略

  • 结合媒体查询调整换行行为

  • 针对小屏幕设备的优化处理

3. 适用场景识别

  • 长URL地址：防止链接溢出破坏布局

  • 技术术语：处理编程中的长变量名和函数名

  • 用户生成内容：防止用户输入的长文本破坏布局

  • 数据表格：确保表格内容的完整显示

4. 性能优化建议

  • 避免过度使用激进的换行策略

  • 结合 text-overflow: ellipsis 处理超长文本

  • 考虑使用 JavaScript 进行更复杂的文本处理

5. 可访问性考虑

  • 确保换行后的文本仍然可读

  • 避免在重要信息中间断行

  • 考虑屏幕阅读器的处理方式

6. 浏览器兼容性

  • 主流浏览器都支持 word-wrap 和 overflow-wrap

  • IE6+ 支持 word-wrap 属性

  • 移动端浏览器均有良好支持

常见问题解决方案

连续数字和字母换行

.break-all {
    word-break: break-all;
    overflow-wrap: anywhere;
}

中英文混合文本

.chinese-english-mix {
    word-wrap: break-word;
    word-break: keep-all;
}

代码块特殊处理

.code-container {
    overflow-x: auto;
    white-space: pre-wrap;
    word-wrap: break-word;
}

通过系统学习 word-wrap 属性的各种用法和技巧，开发者可以更好地处理网页中的长文本内容，确保布局的稳定性和内容的可读性。

本文标签：
← CSS height 高度 CSS box-shadow 属性 →

感谢您的认可和支持

微信支付二维码 - 长按识别

微信

支付宝二维码 - 长按识别

支付宝

持续输出优质内容需要动力，您的每一个打赏都是深夜码字时的温暖咖啡☕
分享笔记 （共有 篇笔记）
验证码：
微信公众号