Glittering's blog

Appearance

文字在一行或多行时超出显示省略号 ​

一、单行文字超出显示省略号 ​

最常见写法（✅ 所有现代浏览器都支持）：

css
.single-line {
  overflow: hidden;              /* 超出隐藏 */
  text-overflow: ellipsis;       /* 超出部分显示省略号 */
  white-space: nowrap;           /* 不换行 */
  width: 200px;                  /* 必须限定宽度 */
}

📘 关键点解释：

属性作用
overflow: hidden隐藏超出容器的内容
text-overflow: ellipsis超出部分显示 ...
white-space: nowrap强制文字在一行显示，不换行
width必须设置，否则无效（可为固定宽度或 max-width）

✅ 效果：

:::demo [vanilla]

html
<html>
   <div class="single-line">演示文字演示文字演示文字演示文字演示文字演示文字演示文字演示文字演示文字演示文字演示文字演示文字演示文字演示文字演示文字演示文字演示文字</div>
</html>
<style>
    .single-line{
        border: 1px solid #999;
        overflow: hidden;              /* 超出隐藏 */
        text-overflow: ellipsis;       /* 超出部分显示省略号 */
        white-space: nowrap;           /* 不换行 */
        width: 200px;                  /* 必须限定宽度 */
    }
</style>

:::

二、多行文字超出显示省略号 ​

多行情况要用 WebKit 的私有属性👇

css
.multi-line {
  display: -webkit-box;              /* 作为弹性伸缩盒子模型显示 */
  -webkit-box-orient: vertical;      /* 垂直排列子元素 */
  -webkit-line-clamp: 2;             /* 限制显示2行 */
  overflow: hidden;                  /* 超出隐藏 */
  text-overflow: ellipsis;           /* 超出部分显示... */
}

📘 关键点：

属性说明
-webkit-line-clamp: n显示 n 行后截断
display: -webkit-box + -webkit-box-orient: vertical实现多行布局
overflow: hidden让截断生效

✅ 效果：

:::demo [vanilla]

html
<html>
   <div class="multi-line">演示文字演示文字演示文字演示文字演示文字演示文字演示文字演示文字演示文字演示文字演示文字演示文字演示文字演示文字演示文字演示文字演示文字</div>
</html>
<style>
    .multi-line{
        border: 1px solid #999;
        width: 200px;

        display: -webkit-box;              /* 作为弹性伸缩盒子模型显示 */
        -webkit-box-orient: vertical;      /* 垂直排列子元素 */
        -webkit-line-clamp: 2;             /* 限制显示2行 */
        overflow: hidden;                  /* 超出隐藏 */
        text-overflow: ellipsis;           /* 超出部分显示... */
      }
</style>

:::

三、可选增强版本（带渐变遮罩） ​

为了让省略号更自然（特别是在卡片、列表中）👇

css
.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);
}

✅ 效果：

文字尾部会有渐变消失的效果，更平滑、更美观。

四、Vue 组件化封装（Composition API 版本） ​

你可以直接复制使用👇

vue
<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>

📦 使用方式：

vue
<Ellipsis>这是单行文字省略效果</Ellipsis>

<Ellipsis multi :lines="3">
  这是多行省略效果，可以自动控制显示行数。
</Ellipsis>

五、兼容性总结 ​

属性支持情况
单行省略 (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的知识：

js
let cHeight = noWrapDiv.clientHeight;
let sHeight = noWrapDiv.scrollHeight;
if (sHeight > cHeight) {
      console.log("已经溢出显示省略号");
} else {
      console.log("没有溢出");
}

这里可以用于判断是否溢出显示展开收缩按钮。

scrollHeight：元素内容的高度，包括由于溢出导致的视图中不可见内容。不包含滚动条、边框和外边距。

clientHeight：元素内容的可视区的高度，包含内边距，但不包括水平滚动条、边框和外边距。

offsetHeight：元素的像素高度，高度包含该元素的垂直内边距和边框，且是一个整数。

Copyright © 2026