按钮文字撑破容器需设min-width: 0，配合overflow: hidden、white-space: nowrap和text-overflow: ellipsis；图标布局应改用flex，文字容器设flex: 1并加换行控制；下拉/tab溢出需移除固定height、触发bfc并设min-height保底。

按钮文字撑破容器、挤走相邻元素，或直接从右边“漏”出去——这不是文字太多，是布局没管住它。

flex 容器里 button 文字不截断

在 display: flex 的父容器中，button 默认有 min-width: auto，哪怕你写了 overflow: hidden 和 text-overflow: ellipsis，它也优先按文字内容撑开，省略号根本不会出现。

• 必须显式加 min-width: 0，这是破局关键
• button 要有块级行为：用 display: block 或更稳妥的 display: inline-flex（保留语义且兼容截断）
• 完整生效组合：min-width: 0 + overflow: hidden + white-space: nowrap + text-overflow: ellipsis
• 如果按钮里嵌了图标（如 ✅），建议把文字单独包一层 <span></span> 并施加样式，避免伪元素干扰截断

按钮内长文本+图标布局错位

常见现象是文字横向撑开、把右侧图标“顶出”按钮边界，尤其在窄屏下。根本原因是用了 float: right 定位图标，导致父容器无法正确计算空间分配。

Html2md

使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...

下载

• 改用 display: flex 布局：align-items: center + gap 控制间距
• 图标设 flex: none，防止被压缩；文字容器设 flex: 1 并加 word-break: break-word 或 overflow-wrap: break-word
• 避免给 button 直接设 width，尤其在 flex 容器里，容易破坏响应式
• 移动端慎用 text-overflow: ellipsis：小屏下可能只剩 “…” 可点，建议用媒体查询降级为换行

下拉/选项卡内容溢出遮挡按钮

比如地址选择下拉区或 Tab 内容设了固定高度（如 height: 300px），结果内容超出后直接盖住下方的“确认”按钮，用户点不到。

• 移除硬编码 height，改用 min-height 配合内容自然撑开
• 检查是否用了 float 布局但没清除：浮动元素脱离文档流，会导致父容器高度坍缩，后续元素“钻入”空白区
• 给包裹容器（如 .tabs-container）加 display: flow-root 或 overflow: hidden 触发 BFC，自动包含浮动子项
• 确保 .tabcontent 初始状态不是空内容塌陷，可加 min-height: 1em 或占位内容保底

真正难的不是写对某一条 CSS，而是意识到：按钮溢出从来不是孤立问题，它背后连着 flex 行为、浮动清除、BFC 触发、响应式断点这些容易被忽略的上下文。调一个 min-width: 0 很快，但没想清楚它为什么起作用，下次还会掉坑里。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！