您现在位置> 首页 > 编程 > HTML CSS > CSS
← CSS text-stroke 文字描边 CSS text-overflow 属性 →

CSS 文本效果

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

CSS 文本效果指南：提升网页排版的艺术

前言

在现代网页设计中，文本不仅仅是传递信息的载体，更是视觉设计的重要组成部分。CSS 提供了多种文本效果属性，让开发者能够控制文本的显示方式、处理文本溢出情况，甚至实现特殊的排版效果。本文将深入探讨四种重要的 CSS 文本效果属性：word-break、word-wrap、text-overflow 和 writing-mode。

1. word-break 属性

功能概述

word-break 属性用于指定文本在容器边界处的换行规则，特别适用于处理长单词或连续字符的换行情况。

语法与取值

.element {
  word-break: normal | break-all | keep-all | break-word;
}

  • normal：默认值，使用默认的断行规则

  • break-all：允许在任意字符间换行，防止文本溢出

  • keep-all：保持单词完整性，只在允许的断点处换行

  • break-word：在长单词或URL内部换行（已弃用，建议使用overflow-wrap）

实际应用示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>word-break 属性示例 - 代码号编程</title>
    <style>
        body {
            font-family: 'Microsoft YaHei', sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 40px 20px;
            background-color: #f8f9fa;
            color: #333;
            line-height: 1.6;
        }
        
        h1 {
            color: #2c3e50;
            text-align: center;
            margin-bottom: 40px;
            border-bottom: 2px solid #3498db;
            padding-bottom: 15px;
        }
        
        .example-container {
            background: white;
            padding: 30px;
            border-radius: 10px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
            margin-bottom: 30px;
        }
        
        .example-title {
            color: #3498db;
            font-size: 1.5rem;
            margin-bottom: 15px;
        }
        
        .text-box {
            width: 200px;
            border: 2px solid #ddd;
            padding: 15px;
            margin: 15px 0;
            font-size: 16px;
            background-color: #fff;
        }
        
        .break-all {
            word-break: break-all;
            background-color: #e3f2fd;
        }
        
        .keep-all {
            word-break: keep-all;
            background-color: #e8f5e9;
        }
        
        .normal {
            word-break: normal;
            background-color: #f3e5f5;
        }
        
        .code-sample {
            background: #2d3436;
            color: #fdcb6e;
            padding: 15px;
            border-radius: 6px;
            margin: 20px 0;
            font-family: 'Consolas', monospace;
            overflow-x: auto;
        }
        
        .url-example {
            width: 180px;
            word-break: break-all;
            background-color: #fff3e0;
            border: 2px solid #ffb74d;
            padding: 15px;
            margin: 15px 0;
        }
    </style>
</head>
<body>
    <h1>CSS word-break 属性详解</h1>
    
    <div class="example-container">
        <h2 class="example-title">1. word-break: normal (默认值)</h2>
        <p>默认情况下，浏览器只在空格或连字符处换行。</p>
        <div class="text-box normal">
            这是一个非常长的英文单词：Pneumonoultramicroscopicsilicovolcanoconiosis，它将溢出容器。
        </div>
        
        <div class="code-sample">
.break-normal {
  word-break: normal;
}
        </div>
    </div>
    
    <div class="example-container">
        <h2 class="example-title">2. word-break: break-all</h2>
        <p>允许在任意字符间换行，防止文本溢出容器。</p>
        <div class="text-box break-all">
            这是一个非常长的英文单词：Pneumonoultramicroscopicsilicovolcanoconiosis，它将在字符间换行。
        </div>
        
        <div class="code-sample">
.break-all {
  word-break: break-all;
}
        </div>
    </div>
    
    <div class="example-container">
        <h2 class="example-title">3. word-break: keep-all</h2>
        <p>保持单词完整性，主要在CJK(中日韩)文本中有效。</p>
        <div class="text-box keep-all">
            这是一个测试文本，包含一些长英文单词：HelloWorld和JavaScript编程语言。
        </div>
        
        <div class="code-sample">
.keep-all {
  word-break: keep-all;
}
        </div>
    </div>
    
    <div class="example-container">
        <h2 class="example-title">4. 实际应用：处理长URL</h2>
        <p>使用 word-break: break-all 处理长URL，防止布局破坏。</p>
        <div class="url-example">
            https://www.ebingou.cn/biancheng/advanced/css-text-effects-tutorial
        </div>
        
        <div class="code-sample">
.url-example {
  word-break: break-all;
  width: 180px;
  padding: 15px;
  border: 2px solid #ffb74d;
}
        </div>
    </div>
</body>
</html>

2. word-wrap / overflow-wrap 属性

功能概述

word-wrap（现标准称为overflow-wrap）属性用于控制长单词或不可断字符串的换行行为，防止文本溢出容器。

语法与取值

.element {
  overflow-wrap: normal | break-word | anywhere;
}

  • normal：默认值，只在正常断点处换行

  • break-word：允许在长单词内换行

  • anywhere：可以在任意点换行（比break-word更灵活）

实际应用示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>overflow-wrap 属性示例 - 代码号编程</title>
    <style>
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 40px 20px;
            background-color: #ecf0f1;
            color: #2c3e50;
        }
        
        .example-panel {
            background: white;
            padding: 25px;
            border-radius: 8px;
            box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
            margin-bottom: 30px;
        }
        
        .example-title {
            color: #e74c3c;
            font-size: 1.4rem;
            margin-bottom: 15px;
            border-left: 4px solid #e74c3c;
            padding-left: 10px;
        }
        
        .text-container {
            width: 250px;
            border: 2px solid #bdc3c7;
            padding: 15px;
            margin: 15px 0;
            background-color: #fff;
        }
        
        .normal-wrap {
            overflow-wrap: normal;
            background-color: #f8f9fa;
        }
        
        .break-word {
            overflow-wrap: break-word;
            background-color: #e8f5e9;
        }
        
        .anywhere {
            overflow-wrap: anywhere;
            background-color: #e3f2fd;
        }
        
        .code-block {
            background: #34495e;
            color: #ecf0f1;
            padding: 15px;
            border-radius: 5px;
            margin: 15px 0;
            font-family: 'Consolas', monospace;
            overflow-x: auto;
        }
        
        .comparison-table {
            width: 100%;
            border-collapse: collapse;
            margin: 20px 0;
        }
        
        .comparison-table th, .comparison-table td {
            border: 1px solid #ddd;
            padding: 12px;
            text-align: left;
        }
        
        .comparison-table th {
            background-color: #3498db;
            color: white;
        }
        
        .comparison-table tr:nth-child(even) {
            background-color: #f2f2f2;
        }
    </style>
</head>
<body>
    <h1 style="text-align: center; color: #2c3e50;">CSS overflow-wrap 属性详解</h1>
    
    <div class="example-panel">
        <h2 class="example-title">1. overflow-wrap: normal</h2>
        <p>默认行为，长单词会溢出容器。</p>
        <div class="text-container normal-wrap">
            这个容器包含一个非常长的单词：Pneumonoultramicroscopicsilicovolcanoconiosis，它会溢出。
        </div>
        
        <div class="code-block">
.normal-wrap {
  overflow-wrap: normal;
}
        </div>
    </div>
    
    <div class="example-panel">
        <h2 class="example-title">2. overflow-wrap: break-word</h2>
        <p>允许在单词内换行，防止溢出。</p>
        <div class="text-container break-word">
            这个容器包含一个非常长的单词：Pneumonoultramicroscopicsilicovolcanoconiosis，它会自动换行。
        </div>
        
        <div class="code-block">
.break-word {
  overflow-wrap: break-word;
}
        </div>
    </div>
    
    <div class="example-panel">
        <h2 class="example-title">3. overflow-wrap: anywhere</h2>
        <p>更灵活的换行方式，可以在任意点换行。</p>
        <div class="text-container anywhere">
            这个容器包含一个非常长的单词：Pneumonoultramicroscopicsilicovolcanoconiosis，它会灵活换行。
        </div>
        
        <div class="code-block">
.anywhere {
  overflow-wrap: anywhere;
}
        </div>
    </div>
    
    <div class="example-panel">
        <h2 class="example-title">4. 属性对比</h2>
        
        <table class="comparison-table">
            <tr>
                <th>属性值</th>
                <th>行为描述</th>
                <th>适用场景</th>
            </tr>
            <tr>
                <td>normal</td>
                <td>只在正常断点(空格、连字符)处换行</td>
                <td>常规文本内容</td>
            </tr>
            <tr>
                <td>break-word</td>
                <td>允许在单词内换行，防止溢出</td>
                <td>处理长单词、URL等</td>
            </tr>
            <tr>
                <td>anywhere</td>
                <td>更灵活的换行算法，可以在任意点换行</td>
                <td>需要更精细控制换行的场景</td>
            </tr>
        </table>
    </div>
</body>
</html>

3. text-overflow 属性

功能概述

text-overflow 属性用于控制当文本溢出其容器时的显示方式，通常与white-space: nowrap和overflow: hidden一起使用。

语法与取值

.element {
  text-overflow: clip | ellipsis | string;
}

  • clip：默认值，直接裁剪文本

  • ellipsis：显示省略号(...)表示被裁剪的文本

  • string：使用自定义字符串表示被裁剪的文本(实验性功能)

实际应用示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>text-overflow 属性示例 - 代码号编程</title>
    <style>
        body {
            font-family: 'Microsoft YaHei', sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 40px 20px;
            background-color: #f5f5f5;
            color: #333;
        }
        
        .demo-section {
            background: white;
            padding: 25px;
            border-radius: 8px;
            box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
            margin-bottom: 30px;
        }
        
        .section-title {
            color: #9b59b6;
            font-size: 1.4rem;
            margin-bottom: 15px;
            border-bottom: 2px solid #9b59b6;
            padding-bottom: 8px;
        }
        
        .text-container {
            width: 300px;
            padding: 15px;
            margin: 15px 0;
            border: 2px solid #ddd;
            background-color: #fff;
        }
        
        .clip-example {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: clip;
            background-color: #f0f7ff;
        }
        
        .ellipsis-example {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            background-color: #f0fff4;
        }
        
        .hover-reveal {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            background-color: #fffaf0;
            transition: all 0.3s ease;
            cursor: pointer;
        }
        
        .hover-reveal:hover {
            white-space: normal;
            overflow: visible;
            text-overflow: clip;
        }
        
        .multi-line {
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-overflow: ellipsis;
            background-color: #f5f0ff;
            height: 4.5em;
            line-height: 1.5;
        }
        
        .code-sample {
            background: #2c3e50;
            color: #ecf0f1;
            padding: 15px;
            border-radius: 5px;
            margin: 15px 0;
            font-family: 'Consolas', monospace;
            overflow-x: auto;
        }
        
        .use-case {
            background: #e8f4f8;
            padding: 15px;
            border-radius: 5px;
            margin: 15px 0;
            border-left: 4px solid #3498db;
        }
    </style>
</head>
<body>
    <h1 style="text-align: center; color: #2c3e50;">CSS text-overflow 属性详解</h1>
    
    <div class="demo-section">
        <h2 class="section-title">1. text-overflow: clip</h2>
        <p>直接裁剪溢出的文本，不显示任何指示符。</p>
        <div class="text-container clip-example">
            这是一段很长的文本内容，当它超出容器宽度时会被直接裁剪掉。
        </div>
        
        <div class="code-sample">
.clip-example {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
}
        </div>
    </div>
    
    <div class="demo-section">
        <h2 class="section-title">2. text-overflow: ellipsis</h2>
        <p>使用省略号(...)表示被裁剪的文本。</p>
        <div class="text-container ellipsis-example">
            这是一段很长的文本内容，当它超出容器宽度时会显示省略号。
        </div>
        
        <div class="code-sample">
.ellipsis-example {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
        </div>
        
        <div class="use-case">
            <strong>典型应用：</strong> 表格单元格、导航菜单项、卡片标题等需要限制宽度的地方。
        </div>
    </div>
    
    <div class="demo-section">
        <h2 class="section-title">3. 悬停显示完整文本</h2>
        <p>结合:hover伪类，在用户交互时显示完整内容。</p>
        <div class="text-container hover-reveal">
            这是一段很长的文本内容，悬停时可以查看完整内容。
        </div>
        
        <div class="code-sample">
.hover-reveal {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: all 0.3s ease;
  cursor: pointer;
}

.hover-reveal:hover {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}
        </div>
    </div>
    
    <div class="demo-section">
        <h2 class="section-title">4. 多行文本省略</h2>
        <p>使用非标准但广泛支持的-webkit-line-clamp实现多行文本省略。</p>
        <div class="text-container multi-line">
            这是一段非常长的文本内容，将会被限制显示为三行，超出部分显示省略号。
            多行文本省略在移动端和内容摘要场景中非常有用，可以保持布局整洁。
            通过组合使用-webkit-line-clamp和其他属性实现此效果。
        </div>
        
        <div class="code-sample">
.multi-line {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
        </div>
        
        <div class="use-case">
            <strong>注意：</strong> 这是一个非标准属性，但被所有现代浏览器支持。适用于内容摘要、卡片描述等场景。
        </div>
    </div>
</body>
</html>

4. writing-mode 属性

功能概述

writing-mode 属性定义了文本在水平或垂直方向上的排列方式，以及行流的走向。

语法与取值

.element {
  writing-mode: horizontal-tb | vertical-rl | vertical-lr;
}

  • horizontal-tb：默认值，水平方向，从上到下

  • vertical-rl：垂直方向，从右到左

  • vertical-lr：垂直方向，从左到右

实际应用示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>writing-mode 属性示例 - 代码号编程</title>
    <style>
        body {
            font-family: 'Microsoft YaHei', sans-serif;
            max-width: 1000px;
            margin: 0 auto;
            padding: 40px 20px;
            background-color: #f0f2f5;
            color: #2c3e50;
        }
        
        .demo-container {
            display: flex;
            flex-wrap: wrap;
            gap: 30px;
            justify-content: center;
            margin-top: 40px;
        }
        
        .writing-sample {
            width: 250px;
            height: 200px;
            padding: 20px;
            border: 2px solid #bdc3c7;
            border-radius: 8px;
            background-color: white;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .horizontal-tb {
            writing-mode: horizontal-tb;
            background-color: #e3f2fd;
        }
        
        .vertical-rl {
            writing-mode: vertical-rl;
            background-color: #e8f5e9;
        }
        
        .vertical-lr {
            writing-mode: vertical-lr;
            background-color: #f3e5f5;
        }
        
        .sample-title {
            text-align: center;
            font-weight: bold;
            margin-bottom: 10px;
            color: #2c3e50;
        }
        
        .sample-content {
            font-size: 18px;
            text-align: center;
        }
        
        .use-case-section {
            background: white;
            padding: 25px;
            border-radius: 8px;
            margin: 40px 0;
            box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
        }
        
        .use-case-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 20px;
            margin-top: 20px;
        }
        
        .use-case-card {
            background: #f8f9fa;
            padding: 20px;
            border-radius: 6px;
            border-left: 4px solid #3498db;
        }
        
        .use-case-title {
            color: #3498db;
            margin-bottom: 10px;
        }
        
        .code-block {
            background: #34495e;
            color: #ecf0f1;
            padding: 15px;
            border-radius: 5px;
            margin: 15px 0;
            font-family: 'Consolas', monospace;
            overflow-x: auto;
        }
        
        .browser-support {
            background: #fff3cd;
            padding: 15px;
            border-radius: 5px;
            border-left: 4px solid #ffc107;
            margin: 20px 0;
        }
    </style>
</head>
<body>
    <h1 style="text-align: center; color: #2c3e50;">CSS writing-mode 属性详解</h1>
    <p style="text-align: center;">控制文本的书写方向和排列方式</p>
    
    <div class="demo-container">
        <div class="writing-sample horizontal-tb">
            <div>
                <div class="sample-title">horizontal-tb (默认)</div>
                <div class="sample-content">水平方向，从上到下排列</div>
            </div>
        </div>
        
        <div class="writing-sample vertical-rl">
            <div>
                <div class="sample-title">vertical-rl</div>
                <div class="sample-content">垂直方向，从右到左排列</div>
            </div>
        </div>
        
        <div class="writing-sample vertical-lr">
            <div>
                <div class="sample-title">vertical-lr</div>
                <div class="sample-content">垂直方向，从左到右排列</div>
            </div>
        </div>
    </div>
    
    <div class="code-block">
/* 水平方向，从上到下 */
.horizontal-tb {
  writing-mode: horizontal-tb;
}

/* 垂直方向，从右到左 */
.vertical-rl {
  writing-mode: vertical-rl;
}

/* 垂直方向，从左到右 */
.vertical-lr {
  writing-mode: vertical-lr;
}
    </div>
    
    <div class="use-case-section">
        <h2 style="color: #2c3e50;">实际应用场景</h2>
        
        <div class="use-case-grid">
            <div class="use-case-card">
                <h3 class="use-case-title">中文竖排排版</h3>
                <p>适用于传统中文文献、诗词等需要竖排显示的场合。</p>
            </div>
            
            <div class="use-case-card">
                <h3 class="use-case-title">表格标题</h3>
                <p>在狭窄的表格列中使用垂直文本来显示标题。</p>
            </div>
            
            <div class="use-case-card">
                <h3 class="use-case-title">创意设计</h3>
                <p>为网页设计添加独特的视觉效果和排版风格。</p>
            </div>
            
            <div class="use-case-card">
                <h3 class="use-case-title">侧边栏导航</h3>
                <p>在狭窄的侧边栏中使用垂直文本来节省空间。</p>
            </div>
        </div>
    </div>
    
    <div class="browser-support">
        <h3>浏览器兼容性说明</h3>
        <p>writing-mode 属性在现代浏览器中有很好的支持，包括：</p>
        <ul>
            <li>Chrome 48+</li>
            <li>Firefox 41+</li>
            <li>Safari 10.1+</li>
            <li>Edge 79+</li>
            <li>Opera 35+</li>
        </ul>
        <p>对于旧版浏览器，可能需要使用前缀或提供降级方案。</p>
    </div>
    
    <div class="use-case-section">
        <h2 style="color: #2c3e50;">结合其他CSS属性</h2>
        <p>writing-mode 可以与其他CSS属性结合使用，创造更丰富的效果：</p>
        
        <div class="code-block">
/* 垂直文本居中 */
.vertical-text {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 响应式垂直文本 */
@media (max-width: 768px) {
  .responsive-vertical {
    writing-mode: horizontal-tb;
  }
}
        </div>
    </div>
</body>
</html>

本节课程知识要点

  1. word-break 属性：控制文本在容器边界处的换行规则，特别适用于处理长单词和连续字符

  2. overflow-wrap 属性：处理不可断字符串的换行，防止文本溢出容器

  3. text-overflow 属性：控制溢出文本的显示方式，常与省略号配合使用

  4. writing-mode 属性：定义文本的书写方向和排列方式

  5. 浏览器兼容性：了解各属性的浏览器支持情况并提供适当的回退方案

  6. 实际应用：掌握这些属性在真实项目中的适用场景和实践

实践建议

  1. 谨慎使用 word-break: break-all：只在必要时使用，因为它可能破坏单词的可读性

  2. 优先使用 overflow-wrap：代替已弃用的 word-wrap 属性

  3. 合理使用文本溢出处理：为被截断的文本提供完整的访问方式（如悬停显示）

  4. 考虑可访问性：确保文本效果不会影响内容的可访问性和可读性

  5. 测试多语言支持：特别是使用 writing-mode 时，测试在不同语言下的表现

  6. 渐进增强：为不支持某些属性的浏览器提供可接受的降级体验

总结

CSS 文本效果属性为网页设计师提供了强大的文本控制能力。通过合理运用这些属性，可以创建出既美观又实用的文本布局，增强用户体验和内容可读性。

  • 使用 word-break 和 overflow-wrap 处理长文本和防止溢出

  • 使用 text-overflow 优雅地处理空间有限的文本显示

  • 使用 writing-mode 实现特殊的排版需求和多语言支持

记住，良好的排版不仅关乎美观，更重要的是提升内容的可读性和可用性。在实际项目中，应根据具体需求和目标用户来选择最合适的文本处理方式。

本文标签：
← CSS text-stroke 文字描边 CSS text-overflow 属性 →

感谢您的认可和支持

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

微信

支付宝二维码 - 长按识别

支付宝

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