overflow需配合white-space: nowrap、width/max-width和text-overflow: ellipsis实现单行省略；多行省略用-webkit-box相关属性；overflow: auto/scroll行为因平台而异；JS判断溢出需用scrollWidth与offsetWidth比对并确保渲染完成。
overflow 属性在 CSS 中怎么用才不触发意外换行
直接设 overflow: hidden 很容易让单行文本被截断却不显示省略号，因为 text-overflow: ellipsis 必须配合 white-space: nowrap 和固定宽度（或 max-width）才能生效。只写 overflow 是不够的。
常见错误现象：div 宽度自适应、内容超长时没省略号，反而折成两行；或者用了 overflow: hidden 但文字被整个裁掉，连首字都看不见。
-
white-space: nowrap是必须的，否则换行优先级高于溢出控制 - 容器必须有明确的
width或max-width（百分比、px、rem 都行） -
text-overflow: ellipsis只对单行有效；多行省略需用display: -webkit-box等 hack 方式 - 避免父元素设置
overflow: visible覆盖子元素的隐藏逻辑
多行文本溢出显示省略号的兼容写法
原生 CSS 没有标准的 text-overflow: ellipsis 多行支持，但可以用 WebKit 私有属性实现，且现代浏览器（Chrome/Firefox/Safari/Edge）均已稳定支持。
关键不是只写 overflow，而是组合四条声明：
.clamp-3 {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
注意点：
-
-webkit-line-clamp的值是整数，表示最多显示几行，超出部分被截断+省略 -
display: -webkit-box会重置默认的display行为，可能影响内联样式或 Flex 布局，慎用于已有复杂布局的容器 - Firefox 自 68+ 支持该语法，但旧版需 JS 回退；Safari 12+、Chrome 76+ 全支持
- 不能和
height+overflow: hidden混用，否则省略号可能不出现
overflow: auto 和 overflow: scroll 的实际表现差异
很多人以为 overflow: auto 就是“需要时才显示滚动条”，但真实行为取决于浏览器和平台，默认并不一致。
比如 macOS 上 Chrome 默认隐藏滚动条（只悬停时淡入），而 Windows 下始终显示；overflow: scroll 则强制预留滚动条空间，即使内容没溢出，也会撑开容器宽度（尤其在垂直方向为 scroll 时）。
-
overflow: auto：仅当内容真正溢出时才渲染滚动条，更节省空间 -
overflow: scroll：无论是否溢出，都预留滚动条轨道，可能导致布局抖动（如内容动态加载后高度变化） - 移动端 Safari 对
overflow: auto的触控惯性滚动支持更好；scroll在某些 iOS 版本下会禁用弹性滚动 - 若用
overflow-x: hidden; overflow-y: auto，要防止单独设overflow简写覆盖掉其中一个方向
用 JavaScript 动态判断文本是否溢出的可靠方式
CSS 无法直接暴露“是否被截断”的状态，必须靠 JS 测量。最稳的方法不是比对 scrollWidth 和 clientWidth（受 padding/border 影响），而是用 getBoundingClientRect() + offsetWidth 组合校验。
示例逻辑：
function isTextOverflowed(el) {
const rect = el.getBoundingClientRect();
return el.scrollWidth > el.offsetWidth ||
el.scrollHeight > el.offsetHeight;
}
但要注意：
- 该函数必须在元素已渲染且样式计算完成之后调用（比如
requestAnimationFrame或offsetParent存在时） - 如果元素含
transform或scale，getBoundingClientRect()返回的是视觉尺寸，offsetWidth是布局尺寸，两者不可直接比较 - 使用
ResizeObserver监听容器宽高变化比轮询更高效，但 IE 不支持，需降级为onresize或 MutationObserver - 服务端渲染（SSR）场景下，首次判断需延迟到
useEffect或mounted钩子中，否则拿不到真实尺寸
溢出控制看着简单，但样式组合、平台差异、动态场景下的边界条件特别多，光靠 overflow 一个属性根本压不住。真正落地时，得把容器尺寸、白空间、渲染时机、JS 校验全串起来看。
