text-overflow: ellipsis生效必须同时满足三个条件：明确宽度（width/max-width）、white-space: nowrap、overflow: hidden；缺一不可，且flex子项需加min-width: 0防塌陷。
移动端文字溢出不是“要不要加样式”的问题，而是流式布局中尺寸计算链断裂的典型症状——font-size缩放了，但line-height、width或white-space没同步响应，文字就直接撞出容器。
text-overflow: ellipsis 一行省略必须配齐三个条件
只写 text-overflow: ellipsis 是无效的。它依赖三者共存才能触发：
-
width或max-width：必须有明确宽度约束（百分比、rem、vw都行，但不能是auto或未设） -
white-space: nowrap：禁用换行，让文本在单行内“撑” -
overflow: hidden：隐藏超出部分，否则省略号不渲染
常见错误：div 用了 display: flex 但没设 flex-shrink: 1，子元素会强行撑宽父容器，导致 width 失效；或者用 em 设 width 却忘了父级 font-size 变化会影响实际像素值。
多行省略必须用 -webkit-line-clamp
标准 CSS 没有多行 text-overflow，只能靠 WebKit 私有属性实现两行或三行截断：
立即学习“前端免费学习笔记（深入）”；
.multi-line {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2; /* 控制几行 */
overflow: hidden;
}
注意点：
- 必须配合
display: -webkit-box，不能用flex或block -
-webkit-line-clamp在 Safari 16.4+ 和 Chrome 120+ 稳定，但 Firefox 仍不支持，需降级为 JS 截断或纯换行 - 若父容器用了
font-size: 0.875rem，-webkit-line-clamp计算的是行高 × 行数，所以务必确保line-height是无单位值（如1.5），否则行高错位会导致截断位置偏移
长英文/URL 溢出优先用 word-break 而非 ellipsis
对 “FSSAI License No. 123456789012345” 这类无空格字符串，text-overflow 基本无效——它只在文本“本该换行却没换”时起作用。真正该用的是：
-
word-break: break-all：粗暴断开任意字符间（适合后台 ID、哈希值） -
overflow-wrap: break-word（推荐）：只在无法换行处断开，保留单词完整性，兼容性好 - 两者都需搭配
white-space: normal和overflow: hidden才能防撑破容器
别碰 hyphens: auto：移动端 Safari 对它的支持极差，且需要语言属性 lang="en" 配合，实际效果不可控。
Flex 容器里文本不挤压其他元素的关键是 flex-basis + min-width
当 li 用 display: flex，里面有个 span 文本和一个 button，长文本会把按钮挤出视口——这不是文本的问题，是 Flex 项没设收缩边界：
- 给文本包裹元素加
flex: 1 1 0（即flex-grow: 1,flex-shrink: 1,flex-basis: 0） - 再补一句
min-width: 0：防止 Chrome/Firefox 默认按内容最小宽度锁定，这是很多开发者漏掉的致命一环 - 最后才加
overflow: hidden+text-overflow: ellipsis，顺序不能反
如果还用 position: absolute 把文本层抽出来，整个流式逻辑就彻底失效——响应式不是“加个媒体查询就行”，而是从根元素 font-size 到每个 padding 的单位都要可缩放，任何 px 或绝对定位都是断点。
