nowrap 属性在 html5 中已被明确废弃，必须用 css 的 white-space: nowrap 替代；因其不被 w3c 校验器接受、无法可靠选择、与现代布局冲突且在 shadow dom 中可能失效。
nowrap 属性在 <td> 中已废弃，直接用它会触发 HTML 验证警告，且在现代 CSS 环境中行为不可控。<strong>必须用 <code>white-space: nowrap 替代，且需配合其他样式才能稳定生效。
为什么 nowrap 不能继续用
HTML5 明确废弃了 nowrap 这个布尔属性（哪怕写成 nowrap="nowrap" 也没用）。浏览器虽仍兼容，但：
- 不被 W3C 校验器接受
- 无法通过 CSS 选择器控制（比如 td[nowrap] 不可靠）
- 与 Flex/Grid 布局冲突时表现不一致
- 在 Shadow DOM 或 Web Component 内可能完全失效
white-space: nowrap 必须加 width 或 table-layout: fixed
只写 white-space: nowrap 往往没效果，因为表格默认是 table-layout: auto，列宽由内容撑开，浏览器“觉得不需要换行”就真不换——哪怕你写了 nowrap，它也懒得管。
正确做法是组合使用：
- 给
<table> 设置 <code>table-layout: fixed，让列宽由th/td的width或col决定 - 给目标
<td> 加 <code>white-space: nowrap - 可选：加
overflow: hidden+text-overflow: ellipsis防止文字溢出
示例：
table { table-layout: fixed; width: 100%; }
td.no-wrap { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
想让某些 td 换行、另一些不换行，怎么隔离控制
关键不是“全局关掉换行”，而是按需开关。常见错误是给整个 table 或 td 设 white-space: normal，结果所有单元格都变软了。
推荐方式：
- 默认不设
white-space（即继承normal） - 仅对需要禁止换行的单元格加类名，如
class="no-wrap" - 避免用
!important覆盖，否则后续调试极难定位 - 若用 CSS-in-JS 或 scoped style，注意作用域是否覆盖到
td的子元素（比如里面嵌了<div>，需额外处理）<h3>移动端和长英文 URL 的特殊坑</h3> <p>即使加了 <code>white-space: nowrap，iOS Safari 和部分安卓 WebView 对长 URL/ Base64 字符串仍可能强行折行（尤其在table-layout: fixed下）。这不是 bug，是浏览器主动防布局崩坏。如果必须严格单行显示：
- 用
word-break: keep-all配合white-space: nowrap - 对超长字符串做前端截断（比如用
String.slice(0, 30) + '…'）再渲染 - 避免在
td里放未包裹的纯文本 URL，改用@#@#@#@#@#@#@#@#@#@0并设a { display: inline-block; max-width: 100%; }
最易忽略的一点：没有显式设置
width或max-width的td，哪怕写了white-space: nowrap，在响应式表格里依然可能被压缩变形——宽度才是换行逻辑的真正开关。 - 用
