text-overflow: ellipsis 本身不触发截断，需配合 white-space: nowrap、overflow: hidden 和明确宽度（或 flex 约束）才能生效；单行省略必备三属性，多行需 -webkit-line-clamp；行内元素须设 display: block/inline-block。
text-overflow: ellipsis 为什么没反应
直接加 text-overflow: ellipsis 没效果，不是它坏了，而是它根本没被触发。这个属性只负责“画省略号”，不负责“截断”——截断动作得靠其他属性配合完成。
常见错误现象：text-overflow: ellipsis 写了，但文字照常换行、撑开容器、或直接溢出到外面；检查元素计算样式时发现 white-space 是 normal，overflow 是 visible，宽度也没设。
-
white-space: nowrap必须设置：否则文字在空格/换行符处自动折行，压根不会“溢出”到单行末尾 -
overflow: hidden必须设置：否则溢出内容直接显示，省略号没机会出场 - 容器必须有明确宽度：用
width、max-width或受父容器严格约束（比如flex-basis+min-width: 0），否则浏览器无法判断“哪里算溢出”
white-space: nowrap 和 pre/pre-wrap 的区别
别看到“不换行”就无脑上 white-space: pre。它保留所有空格和换行符，且完全禁止折行，容易导致容器被长单词或连续无空格字符串（如 URL）撑宽，反而让 text-overflow 失效。
真实项目里更常用的是：
-
white-space: nowrap：合并空白符，强制单行，适合标题、标签、表格单元格等场景 -
white-space: pre-wrap：保留换行和空格，但允许在空格处折行；若需保留原文格式又想支持省略，得配合 JS 截断或额外加overflow-wrap: break-word - 避免
flex: 1和white-space: nowrap同时用：前者想压缩，后者拒绝压缩，会冲突导致布局异常
overflow: hidden 不只是“藏文字”
overflow: hidden 看似简单，但它实际影响渲染行为。在 flex 或 grid 容器中，如果子项没设 min-width: 0，即使写了 overflow: hidden，浏览器仍可能优先保持内容最小宽度，导致截断失败。
所以推荐组合写法：
- 块级容器：
width: 200px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; - flex 子项：
flex: 0 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; - 响应式场景：用
max-width: 100%替代固定width，再配合box-sizing: border-box防止边框撑大
多行省略不能只靠 text-overflow
text-overflow: ellipsis 原生只支持单行。想实现两行或三行截断，得用 WebKit 私有方案：
display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
注意点：
- 必须加
overflow: hidden，否则-webkit-line-clamp不生效 -
-webkit-line-clamp是行数上限，不是精确控制；内容不足时不会补空行 - 该方案在 Firefox 和部分旧版 Safari 中不支持，生产环境建议降级为纯 CSS 截断 +
title属性提示完整文本
最易被忽略的细节：所有这些规则都依赖于「块级上下文」。行内元素（比如 span）即使加了全部属性也不会生效，必须先设 display: block 或 inline-block。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
