CSS 控制文字超出省略号的实现方法

一、单行文本省略

1.1 基本实现

单行文本省略是最常见的场景，适用于标题、导航栏等需要限制在一行显示的文本。

css

.text-ellipsis {
  /* 必须设置宽度或最大宽度，否则文本不会被截断 */
  width: 200px;
  /* 或者使用最大宽度 */
  /* max-width: 200px; */
  
  /* 强制文本在一行显示 */
  white-space: nowrap;
  /* 隐藏超出容器的内容 */
  overflow: hidden;
  /* 用省略号替代超出的文本 */
  text-overflow: ellipsis;
}

1.2 适用场景

导航菜单：确保菜单项在一行显示
文章标题：列表页的标题统一长度
表格单元格：防止长内容破坏表格布局
按钮文本：确保按钮大小一致

1.3 注意事项

必须设置固定宽度或最大宽度
元素必须是块级元素或行内块元素
white-space: nowrap 会强制文本不换行
适用于文本内容，不适用于多行场景

二、多行文本省略

2.1 WebKit 内核方案

使用 WebKit 内核的私有属性，适用于 Chrome、Safari、Edge 等现代浏览器。

css

.text-ellipsis-2 {
  /* 设置容器高度，一般为行高的倍数 */
  height: 48px;
  /* 或者不设置高度，由内容自然撑开 */
  
  /* 隐藏超出容器的内容 */
  overflow: hidden;
  /* 用省略号替代超出的文本 */
  text-overflow: ellipsis;
  /* 弹性盒模型布局 */
  display: -webkit-box;
  /* 设置伸缩方向为垂直 */
  -webkit-box-orient: vertical;
  /* 限制显示的行数 */
  -webkit-line-clamp: 2;
  /* 设置行高，确保文本布局合理 */
  line-height: 24px;
}

2.2 跨浏览器方案

使用伪元素和定位实现的跨浏览器方案，适用于所有现代浏览器。

css

.text-ellipsis-multiline {
  /* 设置最大高度，为行高的倍数 */
  max-height: 72px;
  /* 隐藏超出容器的内容 */
  overflow: hidden;
  /* 相对定位，为伪元素提供定位基准 */
  position: relative;
  /* 设置行高 */
  line-height: 24px;
  /* 确保文本不会被截断在单词中间 */
  word-break: break-word;
  /* 底部内边距，为省略号留出空间 */
  padding-right: 1em;
}

.text-ellipsis-multiline::after {
  /* 绝对定位到右下角 */
  position: absolute;
  right: 0;
  bottom: 0;
  /* 背景色，覆盖最后一行文本 */
  background-color: #fff;
  /* 省略号内容 */
  content: '...';
  /* 内边距，确保省略号与文本有一定间距 */
  padding-left: 0.5em;
}

2.3 CSS Grid 方案

使用 CSS Grid 实现的现代方案，适用于支持 Grid 的浏览器。

css

.text-ellipsis-grid {
  /* 使用 Grid 布局 */
  display: grid;
  /* 定义网格模板 */
  grid-template-rows: repeat(3, auto);
  /* 隐藏超出容器的内容 */
  overflow: hidden;
  /* 设置行高 */
  line-height: 24px;
  /* 计算容器高度 */
  max-height: 72px;
}

.text-ellipsis-grid::after {
  /* 超出部分显示省略号 */
  content: '...';
  /* 对齐到右下角 */
  align-self: end;
  justify-self: end;
  /* 背景色 */
  background-color: #fff;
  /* 内边距 */
  padding-left: 0.5em;
  /* 网格位置 */
  grid-row: 3;
  grid-column: 1;
}

三、高级应用

3.1 响应式省略

根据屏幕尺寸自动调整省略行为。

css

.text-ellipsis-responsive {
  /* 基础样式 */
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 24px;
  
  /* 小屏幕单行省略 */
  white-space: nowrap;
  max-width: 100%;
  
  /* 中等屏幕两行省略 */
  @media (min-width: 768px) {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    white-space: normal;
    max-height: 48px;
  }
  
  /* 大屏幕三行省略 */
  @media (min-width: 1024px) {
    -webkit-line-clamp: 3;
    max-height: 72px;
  }
}

3.2 混合场景

结合 Flexbox 实现复杂布局中的文本省略。

css

.flex-container {
  /* 使用 Flexbox 布局 */
  display: flex;
  align-items: center;
  gap: 10px;
  
  /* 容器宽度 */
  width: 100%;
  max-width: 400px;
}

.flex-item {
  /* 固定宽度的元素 */
  width: 60px;
  flex-shrink: 0;
}

.flex-text {
  /* 自适应宽度 */
  flex: 1;
  min-width: 0; /* 关键：允许 flex 子元素收缩 */
  
  /* 文本省略 */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

3.3 表格中的省略

确保表格在各种宽度下都能正常显示。

css

.table-ellipsis {
  width: 100%;
  border-collapse: collapse;
}

.table-ellipsis td {
  border: 1px solid #ddd;
  padding: 8px;
  
  /* 表格单元格文本省略 */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  
  /* 限制单元格宽度 */
  max-width: 150px;
}

/* 特定列的多行省略 */
.table-ellipsis .multiline-cell {
  white-space: normal;
  max-width: 200px;
  max-height: 48px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

四、技术原理

4.1 核心属性解析

属性	值	说明	浏览器支持
`text-overflow`	`ellipsis`	用省略号表示被截断的文本	IE 6+, 所有现代浏览器
`white-space`	`nowrap`	强制文本在一行显示	所有浏览器
`overflow`	`hidden`	隐藏超出容器的内容	所有浏览器
`-webkit-line-clamp`	`number`	限制显示的行数	WebKit 内核浏览器
`-webkit-box-orient`	`vertical`	设置伸缩方向为垂直	WebKit 内核浏览器
`display`	`-webkit-box`	使用弹性盒模型	WebKit 内核浏览器

4.2 实现原理

单行省略原理

white-space: nowrap 强制文本不换行
overflow: hidden 隐藏超出部分
text-overflow: ellipsis 显示省略号
固定宽度确保文本会被截断

多行省略原理

使用 -webkit-box 创建垂直弹性布局
-webkit-line-clamp 限制显示行数
overflow: hidden 隐藏超出部分
text-overflow: ellipsis 显示省略号

五、最佳实践

5.1 推荐方案

场景	推荐方案	优势
单行文本	`text-overflow: ellipsis`	兼容性好，实现简单
多行文本（现代浏览器）	`-webkit-line-clamp`	实现简单，效果好
多行文本（跨浏览器）	伪元素方案	兼容性好，适配所有浏览器
响应式布局	媒体查询 + 混合方案	适配不同屏幕尺寸

5.2 性能考虑

避免过度使用：只在必要的元素上应用省略样式
合理设置宽度：避免过宽或过窄的容器
考虑内容长度：对于特别长的内容，可能需要其他处理方式
测试不同内容：确保在各种内容长度下都能正常显示

5.3 常见问题

省略号不显示

原因：

没有设置宽度或最大宽度
元素不是块级元素
white-space 属性被覆盖
内容长度不足以触发省略

解决方案：

确保设置了合适的宽度
元素设置为 display: block 或 inline-block
检查并修复 white-space 属性
使用足够长的内容测试

多行省略在某些浏览器不生效

原因：

浏览器不支持 -webkit-line-clamp
缺少必要的 WebKit 属性
容器高度设置不当

解决方案：

使用跨浏览器兼容方案
确保所有必要的属性都已设置
正确计算容器高度（行高 × 行数）

六、完整示例

6.1 基础示例

html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文本省略示例</title>
    <style>
        /* 基础样式 */
        body {
            font-family: Arial, sans-serif;
            padding: 20px;
        }
        
        .example {
            margin: 20px 0;
            padding: 15px;
            border: 1px solid #ddd;
            border-radius: 4px;
        }
        
        h3 {
            margin-top: 0;
            color: #333;
        }
        
        /* 单行省略 */
        .text-ellipsis {
            width: 200px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            background-color: #f5f5f5;
            padding: 10px;
        }
        
        /* 两行省略 */
        .text-ellipsis-2 {
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
            text-overflow: ellipsis;
            line-height: 24px;
            max-height: 48px;
            background-color: #f5f5f5;
            padding: 10px;
            width: 300px;
        }
        
        /* 三行省略 */
        .text-ellipsis-3 {
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 3;
            overflow: hidden;
            text-overflow: ellipsis;
            line-height: 24px;
            max-height: 72px;
            background-color: #f5f5f5;
            padding: 10px;
            width: 300px;
        }
    </style>
</head>
<body>
    <h1>CSS 文本省略示例</h1>
    
    <div class="example">
        <h3>单行文本省略</h3>
        <div class="text-ellipsis">
            这是一段很长的文本，用于测试单行文本省略效果。当文本长度超过容器宽度时，应该显示省略号。
        </div>
    </div>
    
    <div class="example">
        <h3>两行文本省略</h3>
        <div class="text-ellipsis-2">
            这是一段很长的文本，用于测试两行文本省略效果。当文本长度超过两行时，应该在第二行末尾显示省略号。
        </div>
    </div>
    
    <div class="example">
        <h3>三行文本省略</h3>
        <div class="text-ellipsis-3">
            这是一段很长的文本，用于测试三行文本省略效果。当文本长度超过三行时，应该在第三行末尾显示省略号。这段文本需要足够长才能触发省略效果。
        </div>
    </div>
</body>
</html>

6.2 实际应用示例

文章列表

css

.article-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.article-item {
  display: flex;
  gap: 15px;
  padding: 15px;
  border: 1px solid #eee;
  border-radius: 4px;
}

.article-image {
  width: 120px;
  height: 80px;
  object-fit: cover;
  flex-shrink: 0;
}

.article-content {
  flex: 1;
  min-width: 0;
}

.article-title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.article-desc {
  font-size: 14px;
  color: #666;
  line-height: 20px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
  max-height: 40px;
}

七、总结

CSS 文本省略是一种常见的前端技术，用于在有限空间内优雅地显示文本内容。通过合理选择实现方案，可以在不同场景下获得良好的显示效果。

核心要点：

单行省略使用 text-overflow: ellipsis
多行省略优先使用 -webkit-line-clamp
跨浏览器兼容需要使用伪元素方案
必须设置合适的宽度和高度
测试不同内容和浏览器环境

通过本文介绍的方法和技巧，您应该能够在各种项目中实现优雅的文本省略效果，提升用户体验和页面美观度。

CSS技巧

三方js

其他

CSS 控制文字超出省略号的实现方法

一、单行文本省略

1.1 基本实现

1.2 适用场景

1.3 注意事项

二、多行文本省略

2.1 WebKit 内核方案

2.2 跨浏览器方案

2.3 CSS Grid 方案

三、高级应用

3.1 响应式省略

3.2 混合场景

3.3 表格中的省略

四、技术原理

4.1 核心属性解析

4.2 实现原理

单行省略原理

多行省略原理

五、最佳实践

5.1 推荐方案

5.2 性能考虑

5.3 常见问题

省略号不显示

多行省略在某些浏览器不生效

六、完整示例

6.1 基础示例

6.2 实际应用示例

文章列表

七、总结

CSS 控制文字超出省略号的实现方法 ​

一、单行文本省略 ​

1.1 基本实现 ​

1.2 适用场景 ​

1.3 注意事项 ​

二、多行文本省略 ​

2.1 WebKit 内核方案 ​

2.2 跨浏览器方案 ​

2.3 CSS Grid 方案 ​

三、高级应用 ​

3.1 响应式省略 ​

3.2 混合场景 ​

3.3 表格中的省略 ​

四、技术原理 ​

4.1 核心属性解析 ​

4.2 实现原理 ​

单行省略原理 ​

多行省略原理 ​

五、最佳实践 ​

5.1 推荐方案 ​

5.2 性能考虑 ​

5.3 常见问题 ​

省略号不显示 ​

多行省略在某些浏览器不生效 ​

六、完整示例 ​

6.1 基础示例 ​

6.2 实际应用示例 ​

文章列表 ​

七、总结 ​

CSS 控制文字超出省略号的实现方法

一、单行文本省略

1.1 基本实现

1.2 适用场景

1.3 注意事项

二、多行文本省略

2.1 WebKit 内核方案

2.2 跨浏览器方案

2.3 CSS Grid 方案

三、高级应用

3.1 响应式省略

3.2 混合场景

3.3 表格中的省略

四、技术原理

4.1 核心属性解析

4.2 实现原理

单行省略原理

多行省略原理

五、最佳实践

5.1 推荐方案

5.2 性能考虑

5.3 常见问题

省略号不显示

多行省略在某些浏览器不生效

六、完整示例

6.1 基础示例

6.2 实际应用示例

文章列表

七、总结