css文字溢出属性_ellipses与overflow的配合使用

text-overflow: ellipsis 必须配合 overflow: hidden 才生效，且需 white-space: nowrap（单行）或特定多行方案；width 必须明确，否则裁剪失效；多行省略需 -webkit-line-clamp 或 JS 实现。

text-overflow: ellipsis 必须配合 overflow: hidden 才生效

单独设置 text-overflow: ellipsis 不会显示省略号，浏览器直接忽略该声明。它只是一个“溢出时怎么截断”的策略，真正触发截断行为的是 overflow 的裁剪机制。

必须同时满足三个条件：

• white-space: nowrap（单行文本）或 white-space: normal + width + height + overflow: hidden（多行需额外处理）
• overflow: hidden（关键！overflow: visible 或 auto 都不行）
• text-overflow: ellipsis

单行文字溢出用 nowrap + overflow: hidden 最可靠

这是最常见也最稳定的组合，适用于按钮文字、表格表头、导航栏标题等固定高度的单行场景。

.truncate-line {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 200px;
}

注意：width 必须有明确值（像素、百分比、max-content 等），否则 overflow: hidden 无裁剪边界，ellipsis 不触发。

容易踩的坑：

• 父容器没设 width，子元素用 100% 但父级宽度由内容撑开 → 实际无裁剪
• 用了 display: flex 但没加 min-width: 0，导致子项不收缩 → overflow: hidden 失效

多行文字溢出不能只靠 text-overflow

text-overflow: ellipsis 原生只支持单行。想实现两行或三行省略，必须绕过标准属性，用 WebKit 私有方案或 JS 补位。

纯 CSS 方案（仅 Chrome/Safari/Firefox 119+）：

.truncate-2lines {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  /* 注意：不能写 text-overflow: ellipsis */
}

这个方案的问题：

• Firefox 旧版本不支持 -webkit-line-clamp
• 无法和 text-align: justify 兼容
• 换行符（\n）可能被忽略，需配合 white-space: pre-line

overflow: hidden 会隐藏所有溢出内容，包括阴影、伪元素和绝对定位子元素

一旦加了 overflow: hidden，不仅文字被裁，::before/::after 超出部分、box-shadow、甚至 position: absolute 的子节点都会被剪掉。

如果需要保留阴影或图标，可考虑：

• 把 overflow: hidden 移到更外层容器，让文字容器本身不裁剪
• 用 mask-image 或 clip-path 替代 overflow（兼容性稍差）
• 对绝对定位元素加 transform: translateZ(0) 强制提升图层，有时能突破裁剪（不稳定）

实际项目中，经常要反复确认「到底是谁在裁剪」——可能是祖先元素某处悄悄加了 overflow: hidden，导致 ellipsis 看似失效，其实根本没走到那一步。