white-space: nowrap 是强制按钮文字单行显示的最直接解法，但必须配合 overflow: hidden 和确定宽度才能实现省略号截断，且需注意 flex 容器中 min-width: auto 的干扰及换行符预处理。

按钮文字换行是默认行为，white-space: nowrap 是最直接解法

浏览器对 <button></button> 默认用 white-space: normal，内容窄时就会在空格处折行。加 white-space: nowrap 能强制单行，但它只管“不折”，不管“溢出”——不配其他样式，文字会撑破按钮或跑出边界。

实操建议：

• white-space: nowrap 必须写在按钮本身上（如 button { white-space: nowrap; }），不能只写在外层容器
• 按钮若为内联元素（比如未设 display），nowrap 效果弱；推荐显式设 display: inline-block 或 block
• 如果按钮宽度由内容撑开（如 width: auto），nowrap 仍可能被忽略——必须配合 max-width 或固定 width
• 中英文混排长词（如 URL）可能被浏览器强行断开，需额外加 word-break: keep-all

text-overflow: ellipsis 不生效？缺这三样就白配

想让超长按钮文字显示省略号，光写 white-space: nowrap 和 text-overflow: ellipsis 没用。它是个“三要素锁”，缺一不可：

• 必须有 white-space: nowrap
• 必须有 overflow: hidden（clip 理论可行但兼容性差，别用）
• 容器必须有**确定宽度**：用 width、max-width，或在 flex 布局中设 flex-basis

常见错误：button { white-space: nowrap; text-overflow: ellipsis; } ——没 overflow、没宽度，纯无效。

按钮里含换行符（\n）怎么办？CSS 解决不了，得靠 JS 清洗

后端返回的按钮文本带 \n（比如 “确认\n提交”），white-space: nowrap 会把换行符当空格处理，显示成 “确认 提交”，不是你想要的单行紧凑效果。

html-deploy

使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。

下载

正确做法是 JS 层预处理：

• 渲染前用 .replace(/\s+/g, ' ') 把所有空白符（包括 \n、\t）压成单个空格
• 若需保留语义换行（极少见），就别用 nowrap，改用 white-space: pre-line + 高度限制
• 避免在按钮内嵌套 <div> 或 <code><p></p>，它们自带块级换行语义，会干扰 nowrap

  Flex 容器里的按钮为啥 nowrap 失效？检查 min-width

  把按钮放进 display: flex 的父容器时，即使写了 white-space: nowrap，它仍可能被拉伸或换行——根源是 flex item 默认 min-width: auto，会阻止内容压缩。

  解决方法很简单：

  • 给按钮加 min-width: 0（或 flex-shrink: 1）
  • 确保父容器没设 flex-wrap: wrap，否则按钮超宽时会被挤到下一行
  • 如果按钮是 flex: 1，它会优先占满空间，nowrap 就失去意义——此时应改用 flex: none + 显式宽度

  真正难的不是让文字不换行，而是让整个布局链路不破坏这个约束：从按钮自身样式，到父容器 flex 规则，再到文本源数据是否含不可见换行符，漏掉任何一环，white-space: nowrap 就形同虚设。