单行文本和多行文本溢出显示省略号的方法有哪些

在网页布局中，文本内容超出容器范围是非常常见的情况，为了避免内容撑破容器或者影响页面整洁度，通常会使用省略号来替代溢出的部分。单行文本和多行文本的实现逻辑存在差异，下面分别介绍对应的实现方法。

单行文本溢出显示省略号

单行文本溢出省略号的实现需要同时满足三个核心CSS属性，缺一不可，具体属性说明如下：

• overflow: hidden：隐藏超出容器范围的文本内容
• text-overflow: ellipsis：设置溢出文本显示为省略号
• white-space: nowrap：强制文本在一行内显示，不自动换行

下面是一个完整的单行文本溢出示例，容器宽度为200px，超出部分显示省略号：

.single-line {
    width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    border: 1px solid #ccc;
    padding: 8px;
}

对应的HTML结构如下：

<div class="single-line">
    这是一段很长的单行文本内容，当文本超出容器宽度时会显示省略号
</div>

多行文本溢出显示省略号

多行文本的实现比单行复杂，常见的有两种方案，分别适用于不同场景。

方案一：webkit内核浏览器专用方案

该方案仅适用于webkit内核的浏览器，比如Chrome、Safari等，实现方式比较简单，核心属性如下：

• display: -webkit-box：将元素设置为弹性盒模型
• -webkit-box-orient: vertical：设置弹性盒子的子元素垂直排列
• -webkit-line-clamp: 行数：指定显示的行数，超出部分显示省略号
• overflow: hidden：隐藏超出范围的文本

下面的示例设置文本最多显示3行，超出部分显示省略号：

.multi-line-webkit {
    width: 200px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    border: 1px solid #ccc;
    padding: 8px;
    line-height: 24px; /* 可选，设置行高让行数计算更准确 */
}

对应的HTML结构：

<div class="multi-line-webkit">
    这是一段很长的多行文本内容，当文本超出三行的时候，超出的部分会被隐藏并显示省略号，适用于webkit内核的浏览器场景
</div>

方案二：通用布局方案

该方案兼容性更好，适用于所有浏览器，核心思路是通过固定容器高度，结合line-height和overflow: hidden来实现，同时用伪元素添加省略号。实现步骤如下：

1. 设置容器的固定高度，高度等于行高乘以要显示的行数
2. 设置line-height和overflow: hidden
3. 使用::after伪元素在容器末尾添加省略号

下面的示例同样设置最多显示3行文本：

.multi-line-common {
    width: 200px;
    line-height: 24px;
    height: 72px; /* 24px * 3行 */
    overflow: hidden;
    border: 1px solid #ccc;
    padding: 8px;
    position: relative;
}

.multi-line-common::after {
    content: "...";
    position: absolute;
    right: 8px;
    bottom: 0;
    padding-left: 40px;
    background: linear-gradient(to right, transparent, #fff 50%);
}

对应的HTML结构：

<div class="multi-line-common">
    这是一段很长的多行文本内容，通过固定容器高度和伪元素的方式实现多行省略，兼容性更好，适用于所有主流浏览器
</div>

注意事项

• 单行文本方案中，容器必须有明确的宽度，否则无法计算溢出范围
• webkit方案中的-webkit-box-orient属性在部分打包工具中可能会被删除，需要添加注释保护该属性
• 通用方案中，如果文本内容不足指定行数，伪元素的省略号可能会提前显示，需要根据实际场景调整样式

text_overflowwhite_spacewebkit_line_clampoverflowline_height修改时间：2026-06-07 02:59:17