文字在一行或多行时超出显示省略号
# 文字在一行或多行时超出显示省略号
# 一、单行文字超出显示省略号
最常见写法（✅ 所有现代浏览器都支持）：
.single-line {
overflow: hidden; /* 超出隐藏 */
text-overflow: ellipsis; /* 超出部分显示省略号 */
white-space: nowrap; /* 不换行 */
width: 200px; /* 必须限定宽度 */
}
1
2
3
4
5
6
2
3
4
5
6
📘 关键点解释：
| 属性 | 作用 |
|---|---|
overflow: hidden | 隐藏超出容器的内容 |
text-overflow: ellipsis | 超出部分显示 ... |
white-space: nowrap | 强制文字在一行显示，不换行 |
width | 必须设置，否则无效（可为固定宽度或 max-width） |
✅ 效果：
# 二、多行文字超出显示省略号
多行情况要用 WebKit 的私有属性👇
.multi-line {
display: -webkit-box; /* 作为弹性伸缩盒子模型显示 */
-webkit-box-orient: vertical; /* 垂直排列子元素 */
-webkit-line-clamp: 2; /* 限制显示2行 */
overflow: hidden; /* 超出隐藏 */
text-overflow: ellipsis; /* 超出部分显示... */
}
1
2
3
4
5
6
7
2
3
4
5
6
7
📘 关键点：
| 属性 | 说明 |
|---|---|
-webkit-line-clamp: n | 显示 n 行后截断 |
display: -webkit-box + -webkit-box-orient: vertical | 实现多行布局 |
overflow: hidden | 让截断生效 |
✅ 效果：
# 三、可选增强版本（带渐变遮罩）
为了让省略号更自然（特别是在卡片、列表中）👇
.multi-fade {
position: relative;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.multi-fade::after {
content: "";
position: absolute;
bottom: 0;
right: 0;
width: 30%;
height: 1.2em;
background: linear-gradient(to right, transparent, #fff);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
✅ 效果：
文字尾部会有渐变消失的效果，更平滑、更美观。
# 四、Vue 组件化封装（Composition API 版本）
你可以直接复制使用👇
<template>
<div
:class="['ellipsis', { multi }]"
:style="{ '-webkit-line-clamp': lines }"
>
<slot />
</div>
</template>
<script setup>
defineProps({
multi: { type: Boolean, default: false }, // 是否多行
lines: { type: Number, default: 2 }, // 多行时显示行数
})
</script>
<style scoped>
.ellipsis {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.ellipsis.multi {
display: -webkit-box;
white-space: normal;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
📦 使用方式：
<Ellipsis>这是单行文字省略效果</Ellipsis>
<Ellipsis multi :lines="3">
这是多行省略效果，可以自动控制显示行数。
</Ellipsis>
1
2
3
4
5
2
3
4
5
# 五、兼容性总结
| 属性 | 支持情况 |
|---|---|
单行省略 (text-overflow: ellipsis) | ✅ 所有现代浏览器 |
多行省略 (-webkit-line-clamp) | ✅ Chrome、Safari、Edge、Firefox 68+ |
| 渐变遮罩方案 | ✅ 所有现代浏览器 |
| IE 浏览器 | ⚠️ 仅支持单行省略 |
# 六、面试常见回答模板
文字超出显示省略号分为两种： 单行可以用
overflow: hidden、text-overflow: ellipsis和white-space: nowrap； 多行则用-webkit-line-clamp限制显示行数，并结合display: -webkit-box； 如果需要兼容旧版浏览器或 IE，可以用 JS 动态截取字符串。 在 Vue 项目中我通常会封装一个<Ellipsis />组件，实现灵活复用。
# 七、JS判断是否显示了省略号
有时候我们需要知道是否已经溢出，显示了省略号，可以用到clientHeight和scrollHeight的知识：
let cHeight = noWrapDiv.clientHeight;
let sHeight = noWrapDiv.scrollHeight;
if (sHeight > cHeight) {
console.log("已经溢出显示省略号");
} else {
console.log("没有溢出");
}
1
2
3
4
5
6
7
2
3
4
5
6
7
这里可以用于判断是否溢出显示展开收缩按钮。
scrollHeight：元素内容的高度，包括由于溢出导致的视图中不可见内容。不包含滚动条、边框和外边距。
clientHeight：元素内容的可视区的高度，包含内边距，但不包括水平滚动条、边框和外边距。
offsetHeight：元素的像素高度，高度包含该元素的垂直内边距和边框，且是一个整数。
上次更新: 2025/11/25, 03:24:47