伪元素省略号被文字残影遮挡需用背景色覆盖而非调z-index；单行定位应改用top:50%+transform居中；::before不显示多因content为空或容器未定位；多行、表格、内联元素等场景伪元素方案易失效。
伪元素省略号被文字残影遮挡怎么办
直接用 ::after 插入省略号时，常出现右边缘“半个字露头”、锯齿、颜色混叠——这不是 bug，是 overflow: hidden 裁剪不彻底导致的视觉残留。核心解法不是调 z-index，而是用背景色主动覆盖。
-
background必须设（哪怕和父容器同色），用来盖住被裁掉但尚未完全消失的字符笔画 - 不要依赖
z-index层叠顺序，伪元素默认就在文本上方，但裁剪边界模糊时仍会透出残影 - 若容器背景非纯色（如渐变、图片），
background改用rgba(255,255,255,0.98)微透，比全 opaque 更自然 - 慎用
text-shadow或filter，它们会扩大文本渲染区域，加剧重叠问题
单行伪元素省略号定位总偏移怎么调
用 right: 0; bottom: 0 看似合理，但在不同字体、行高、内边距下极易错位。真正稳定的做法是脱离“锚点思维”，改用居中对齐逻辑。
- 统一用
top: 50%; transform: translateY(-50%)垂直居中，不受line-height或padding影响 -
right改为left: 100%+margin-left: -8px（根据省略内容宽度微调），避免容器border或padding干扰 - 如果容器有
box-sizing: border-box且带border，right: 0实际指向 border 内侧，而非内容区右缘 - 测试时务必在 iOS Safari 和 Chrome for Android 上验证，这两端对
transform的像素对齐更敏感
为什么 ::before 在某些布局里根本不显示
::before 不渲染，90% 是因为 content 为空或容器未触发伪元素渲染条件。它不像真实 DOM 元素，没内容就等于不存在。
-
content值必须是非空字符串，content: ""不行，至少写content: "."或content: "…" - 容器必须有
position: relative，否则position: absolute的伪元素会相对于最近的定位祖先，可能飞到视口外 - Flex/Grid 子项若未设
min-width: 0，会阻止内容收缩，导致伪元素无空间渲染（尤其在flex: 1场景） - 若父容器用了
contain: layout或content-visibility: auto，伪元素可能被强制跳过渲染
伪元素做省略号在哪些场景会失效
伪元素方案本质是视觉障眼法，越靠近复杂布局边界，越容易穿帮。它不是通用替代品，而是特定条件下的折中解。
立即学习“前端免费学习笔记（深入）”；
- 多行文本：不用
::before/::after模拟，-webkit-line-clamp是唯一可靠原生方案 - 表格单元格（
<td>）：<code>display: table-cell会忽略position: absolute，伪元素无法精确定位 - 内联元素（如
<span></span>）直接套样式：必须先加display: inline-block，否则width和position失效 - 需要点击交互的省略号（如“…更多”）：记得加
pointer-events: none到伪元素，否则会拦截下方文本的点击事件
真正难处理的，从来不是“怎么让省略号显示出来”，而是“怎么让它在各种缩放、换行、动态宽度下始终不穿帮”。这时候该上 JS 截断逻辑，别硬扛 CSS 魔术。
