text-overflow: ellipsis 必须配合 white-space: nowrap、overflow: hidden 和明确宽度（如 width 或 max-width）才生效；多行省略需用 -webkit-box + -webkit-line-clamp + -webkit-box-orient: vertical。
text-overflow: ellipsis 必须配合哪些CSS属性才生效
单独写 text-overflow: ellipsis 没用，浏览器直接忽略。它是个“依赖型”属性，只在特定布局条件下起作用。
必须同时满足三个条件：
-
white-space: nowrap（强制单行，否则文字换行了就无所谓“溢出”） -
overflow: hidden（隐藏超出部分，不然省略号没意义） - 元素要有**明确宽度**（
width、max-width，或父容器是 flex/grid 且自身不伸缩）
常见翻车现场：div 默认是块级无宽，或者用了 display: inline 却没设宽 —— 此时加了 text-overflow 也看不到省略号。
多行文字怎么实现省略号（WebKit/Chrome/Firefox支持差异）
原生 text-overflow: ellipsis 只支持单行。想三行截断加省略号，得靠 display: -webkit-box 这套非标准但广泛支持的组合。
关键点：
- 必须用
-webkit-line-clamp: 3（数字即行数），且只能用于display: -webkit-box元素 -
-webkit-box-orient: vertical是必要配套，缺一不可 - Firefox 117+ 才开始支持
-webkit-line-clamp，旧版 Firefox 需降级为 JS 截断或服务端处理 - 这个方案对
flex子项兼容性差，若父容器是display: flex，子元素需额外加align-self: flex-start或设min-width: 0防止宽度计算异常
示例最小可用结构：
.clamp-3 {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
中文/中英文混排下省略号位置不准或被截断
不是 bug，是字体度量和排版引擎的正常表现。尤其当最后一字是全角标点（如，。！？）、或中英文紧邻时，浏览器可能把省略号算进“可见字符数”，导致提前截断。
缓解办法：
- 确保父容器
font-family中优先指定支持中英文等宽的字体（如"PingFang SC", "Helvetica Neue", sans-serif），避免 fallback 到不一致字体 - 慎用
letter-spacing或word-spacing，它们会干扰浏览器对“可截断位置”的判断 - 如果内容来自用户输入，且必须精确控制字符数，别依赖 CSS 截断 —— 后端或 JS 提前按 Unicode 字符长度截取更可靠（注意：一个中文字符 = 1 length，一个 emoji 可能 = 2）
React/Vue里动态更新文本后省略号不重绘
DOM 文本变了，但 text-overflow 不触发重绘，尤其是用 v-show 或 visibility: hidden 切换时 —— 因为元素没脱离文档流，浏览器认为布局未变。
简单有效解法：
- 改用
display: none控制显隐（强制重排） - 文本更新后，给元素加个临时 class 触发重排：
element.classList.toggle('force-repaint')，配合.force-repaint { animation: 0.001s } - Vue 3 / React 18 下，若用
ref绑定元素，可在useEffect或onUpdated里调用getBoundingClientRect()强制读取布局
这问题本质是浏览器优化策略，不是框架缺陷，但容易误判为“样式没生效”。
最麻烦的其实是字体加载时机 —— 如果用自定义字体，text-overflow 会在字体加载前按 fallback 字体计算宽度，导致加载后突然显示不全或省略号错位。这时候得监听 fontload 或用 @font-face 的 font-display: optional 来权衡。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
