CSS 实现文本溢出省略号（三种主流方式，适配单行 & 多行）

在构建现代 Web 应用时，我们经常需要对不确定长度的文本内容进行视觉控制，避免页面错乱或过度换行。最常见的方式就是使用 CSS 的 ellipsis（省略号）技术，让文本在超过指定行数时，用 … 来表示“还有更多”。

🧭 一、应用场景分析

常见需要省略的 UI 场景包括：

• 文章或资讯列表的标题、摘要
• 商品名称、价格说明
• 移动端卡片布局的内容介绍
• 列表项说明、按钮内文案（字多的情况下）
• 表格中的单元格文字

① 单行文本溢出显示省略号

✅ 最佳实践 CSS

.ellipsis-single {
  width: 100%;                /* 或固定宽度 */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

📝 示例 HTML

<div class="ellipsis-single">
  CSS实现多行文本溢出显示省略号CSS实现多行文本溢出显示省略号
</div>

🖼️ 效果图示意

📌 核心原理说明

⚠️ 注意事项

• width 是必要条件，否则浏览器无法判断“超出”；
• 默认应用于块或 inline-block 元素，span 需手动设置 display: inline-block；
• 所有主流浏览器支持，包括 IE9+。

② 多行文本溢出显示省略号（最多展示 N 行）

✅ 最佳实践 CSS（使用 -webkit-line-clamp）

.ellipsis-multiline {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;    /* 限制最多显示3行 */
  overflow: hidden;
  text-overflow: ellipsis;  /* 可选，部分浏览器不生效 */
  word-break: break-word;
}

📝 示例 HTML

<div class="ellipsis-multiline">
  CSS实现多行文本溢出显示省略号CSS实现多行文本溢出显示省略号CSS实现多行文本溢出显示省略号CSS实现多行文本溢出显示省略号CSS实现多行文本溢出显示省略号CSS实现多行文本溢出显示省略号CSS实现多行文本溢出显示省略号CSS实现多行文本溢出显示省略号
</div>

🖼️ 效果图示意

✅ 原理说明（基于 Flexbox + Webkit 私有属性）

• display: -webkit-box 是一种老的弹性盒模型布局；
• -webkit-box-orient: vertical 设置为垂直方向；
• -webkit-line-clamp: 3 控制显示行数；
• overflow: hidden 截断多余文本。

🔄 兼容性

③ 纯 CSS 实现多行省略兼容方案（低兼容版本，推荐降级方案）

.ellipsis-multiline-fallback {
  height: 4.5em; /* 行高1.5em × 3行 */
  line-height: 1.5em;
  overflow: hidden;
  position: relative;
}
.ellipsis-multiline-fallback::after {
  content: '...';
  position: absolute;
  bottom: 0;
  right: 0;
  padding-left: 10px;
  background: linear-gradient(to right, transparent, white 50%);
}

该方法通过限制 height 实现近似多行省略，但无法自动适应字体大小变化，不如 -webkit-line-clamp 灵活。

🧰 补充：使用 Tailwind CSS（可选）

如果你使用 Tailwind，可以快速实现：

<!-- 单行 -->
<div class="truncate w-full">一行内容溢出显示省略号</div>
<!-- 多行（需要自定义插件或扩展） -->
<div class="line-clamp-3 w-full">多行文本显示省略号</div>

需要安装 @tailwindcss/line-clamp 插件才能使用 line-clamp-X 类名。

🔧 Vue 中的应用（单行 & 多行）

<template>
  <div class="ellipsis-single">{{ title }}</div>
  <div class="ellipsis-multiline">{{ description }}</div>
</template>

<style scoped>
.ellipsis-single {
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.ellipsis-multiline {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
</style>

⚙️ React 中的使用方式

export const EllipsisText = ({ text, lines = 2 }: { text: string; lines?: number }) => {
  return (
    <div
      style={{
        display: '-webkit-box',
        WebkitBoxOrient: 'vertical',
        WebkitLineClamp: lines,
        overflow: 'hidden',
      }}
    >
      {text}
    </div>
  );
};

📚 工程化建议

✅ 组件封装建议（如封装为 EllipsisText.vue 或工具类）

• 单行/多行参数化
• 支持 title 属性显示完整内容
• 支持点击“展开/收起”切换

✅ 性能建议

• 对性能无明显影响，但不建议在超长列表中大规模使用 line-clamp，尤其移动端；
• 推荐使用 IntersectionObserver 动态加载内容 + 按需省略。

🚫 常见误区及排查指南

🔚 总结

🧪 Bonus：判断是否溢出（JS 方式）

function isEllipsisActive(el: HTMLElement): boolean {
  return el.scrollWidth > el.clientWidth;
}

适用于：点击时判断是否完整展示内容等交互场景。

✅ 结语

文本省略虽然看似简单，但在 UI/UX 上却影响很大。建议结合实际业务场景选择合适方案，并在项目中进行组件化封装，提高可维护性。