text-overflow: ellipsis 必须配合 white-space: nowrap、overflow: hidden 和 width（或 max-width）才生效；多行省略需用 -webkit-line-clamp 并配合 display: -webkit-box 等属性。

text-overflow: ellipsis 必须配合哪些 CSS 属性才生效

text-overflow: ellipsis 单独写完全没用，它只负责“画省略号”，但不控制换行和截断逻辑。真正起作用的是三者协同：white-space、overflow 和 width（或 max-width）。

常见错误是只加 text-overflow: ellipsis，结果文本照常换行或直接撑开容器。

• white-space: nowrap：强制单行不换行（最常用），否则多行文本无法触发单行省略
• overflow: hidden：隐藏溢出内容，没有它，省略号不会显示，多余文字会直接露出来
• 必须有明确的宽度限制，比如 width: 200px 或 max-width: 100%；flex 或 grid 容器中尤其容易漏掉这个

多行文本溢出用 -webkit-line-clamp 而不是 text-overflow

text-overflow 原生只支持单行。想实现“最多两行，超出加省略号”，得用 -webkit-line-clamp —— 这是 WebKit/Blink 专属属性，目前 Chrome、Edge、Safari 都支持，Firefox 仍不支持（需 fallback）。

它必须配合 display: -webkit-box 和 -webkit-box-orient: vertical 才能生效，本质是把块元素当成弹性盒子来截行。

立即学习“前端免费学习笔记（深入）”；

Knowledge Graph - Csv Graph Loader Generator

从 CSV 数据集生成图数据库加载器和三元组映射。将表格 CSV 数据转换为图数据库可直接使用的节点、边和三元组。

下载

• 写法示例：

  .clamp-2 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }

• 注意：不能和 white-space: nowrap 共存，否则 -webkit-line-clamp 失效
• Firefox 用户看到的是自然折行（无省略号），如需兼容，得用 JS 截断或服务端预处理

white-space 的不同取值对溢出行为的影响

white-space 决定了空格、换行符如何处理，直接影响文本是否“有机会溢出”。不是所有值都适合配 text-overflow。

• white-space: nowrap：空格当普通字符，不换行 → 溢出可控，适合单行省略
• white-space: pre：保留空格和换行，但不自动换行 → 可能意外拉宽容器，慎用
• white-space: normal（默认）：空格合并、自动换行 → 文本在边界内就折行了，根本不会触发 text-overflow
• white-space: pre-wrap：保留空格和换行，同时允许自动换行 → 溢出行为复杂，一般不和 ellipsis 搭配

Flex 容器中 text-overflow 失效的典型原因

在 display: flex 的父容器里，子项默认不收缩（flex-shrink: 1 有效，但初始 min-width: auto 会阻止压缩），导致即使写了 white-space: nowrap 和 overflow: hidden，文本依然不省略。

关键是要让文本容器“愿意变窄”：

• 给文本容器加 min-width: 0（或 min-width: fit-content），覆盖 min-width: auto 的默认行为
• 确保父 flex 项没设 flex: 0 0 auto 或 flex-grow: 0 且没留足空间
• 避免在文本容器上误加 flex: 1 却忘了设 overflow，flex 会优先撑满空间而非截断

复杂布局里，min-width: 0 是最容易被忽略的一环。