overflow: hidden 对单行文字无效，因其仅作用于块级盒模型溢出，需配合 white-space: nowrap、text-overflow: ellipsis 及明确宽高才生效。
overflow: hidden 为什么没截断文字
直接设 overflow: hidden 对单行文字无效，是因为它只对“块级盒模型的溢出”起作用，而文字默认是内联流，不会触发溢出检测。必须配合 white-space、text-overflow 和固定宽高（或 max-width）才能生效。
- 缺
white-space: nowrap：文字照常换行，根本不会溢出容器 - 缺
text-overflow: ellipsis：即使溢出，也不会显示省略号，而是直接裁切（可能切在字中间） - 缺
width或max-width：容器宽度由内容撑开，没有“超出”的前提
单行文字截断加省略号的标准写法
这是最常搜到的场景，核心是三属性联动，少一个都不可靠：
div {
width: 200px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
-
width必须是明确值（如200px、50%），百分比需父容器有确定宽度 -
white-space: nowrap阻止换行，强制文字横向延伸，才可能“溢出” -
text-overflow: ellipsis只在overflow: hidden+white-space: nowrap同时存在时才生效 - 不支持多行，也不兼容 IE8 及更早版本（但基本可忽略）
多行文字用 -webkit-line-clamp 的坑
想截两行或三行并加省略号？-webkit-line-clamp 是目前最实用的方案，但它不是标准属性，行为和兼容性要特别注意：
- 必须搭配
display: -webkit-box和-webkit-box-orient: vertical才生效 - 仅在 WebKit 内核（Chrome、Safari、Edge 新版）中可靠，Firefox 完全不支持
-
line-clamp值为整数，比如2表示最多显示两行，超出部分隐藏+省略号 - 如果内容含
<br>或块级子元素（如<strong></strong>），可能提前截断或失效
overflow: hidden 的副作用容易被忽略
它不只是“藏掉多余文字”，还会静默吞掉所有溢出内容，包括定位元素、阴影、滚动条甚至焦点框：
- 子元素设了
position: absolute且超出父容器边界？直接被裁掉，看不见也点不到 - 用了
box-shadow且阴影超出容器？阴影也被砍掉 - 容器内有
textarea或带滚动的区域？overflow: hidden会禁用滚动，用户无法查看完整内容 - 调试时发现某个元素“消失”了，先检查父级是否误加了
overflow: hidden
真正需要隐藏溢出时，务必确认它影响的不只是文字——有时候你只是想截文本，结果把交互控件一起封印了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
