text-overflow: ellipsis生效必须同时满足三个条件：容器有明确width或max-width、white-space: nowrap强制单行、overflow: hidden隐藏溢出；flex布局中还需子元素加min-width: 0才能触发截断。
单行文本被容器截断，不是内容太长，而是你根本没想让它“单行”——white-space: nowrap加错了地方，或者压根没配齐三件套。
text-overflow: ellipsis 为什么没生效？
它只在单行场景下起作用，但必须同时满足三个条件：
-
width或max-width：容器得有明确宽度，内联元素（如<span></span>）默认不认width，得加display: block或display: inline-block -
white-space: nowrap：强制不换行，否则省略号永远没机会出现 -
overflow: hidden：隐藏溢出部分，省略号才能被“挤”出来
常见错误是只写 text-overflow: ellipsis，或者把这三条加在父容器上，而文本实际在子元素里——样式必须落在承载文本的元素本身。
Grid 布局里 overflow-wrap: break-word 不换行？
这不是属性失效，是 Grid 项默认 min-width: auto 锁死了最小宽度。哪怕你写了 overflow-wrap: break-word，浏览器也优先按整段 URL 或中文串的固有宽度撑开容器。
解决方法只有两个靠谱的：
- 给文本所在元素（比如
.card-description）加min-width: 0—— 直接覆盖默认行为，语义清晰、无副作用 - 或改用
overflow: hidden—— 它会隐式将min-width设为0，顺便隐藏溢出内容，但别用在需要滚动查看的场景
别试 word-break: break-all 来“救急”，中文会被切成单字，“用户”变“用”+“户”，可读性直接崩掉。
用户提交的带换行文本怎么原样显示又自动折行？
表单里粘贴的评论、日志、Markdown 渲染结果，常含 \n。直接塞进 <div> 会被浏览器当空格处理，塌成一行；用 <code>white-space: pre 又不折行，长行横向溢出。
唯一解是 white-space: pre-wrap：
- 保留所有
\n、\t和空格原始位置 - 同时允许在容器右边界自动折行
- 不用额外套
<pre class="brush:php;toolbar:false;"></pre>标签，也不用 JS 预处理换行符
注意：它和 text-overflow: ellipsis 逻辑冲突，二者不能共存——pre-wrap 要的是完整换行，不是单行截断。
Flex 子项文字撑破容器？
90% 是因为没设 min-width: 0。Flex 子项默认 min-width: auto，哪怕你写了 flex: 1 或 overflow-wrap: break-word，它照样拒绝收缩。
修复很简单：
- 把
min-width: 0加到文本所在的元素上（不是 Flex 容器） - 如果该元素还用了
flex: 1，min-width: 0依然不能省——它不是冗余，是必要覆盖
别靠 overflow: hidden 掩耳盗铃，那只是藏起来，不是让它换行。
