不能直接用在 上，因表格布局模型会忽略该属性；需作用于外层块级容器（如 div.table-wrapper）并配合 overflow-x: auto 和单元格断行控制才生效。

max-inline-size 能不能直接用在

上？

不能直接生效。浏览器对 table 元素的渲染逻辑特殊，max-inline-size 在多数主流引擎（Chrome 105+、Firefox 103+、Safari 16.4+）中对 table 的行内尺寸限制会被忽略——即使它语法合法、控制台不报错。

原因在于：表格的布局模型（尤其是 table-layout: auto）优先按内容计算列宽，会绕过逻辑尺寸属性的约束；而 table-layout: fixed 虽可配合 width 控制，但此时 max-inline-size 仍不参与列宽分配逻辑。

所以别把 max-inline-size 直接写在 table 规则里，它不会拦住长文本或图片撑开表格。

真正起作用的位置：包裹容器 + display: block

要让 max-inline-size 发挥作用，必须把它用在「能被逻辑尺寸属性正常接管」的元素上——也就是一个普通块级容器，且该容器内只包含一个 table。

• 给外层 <div class="table-wrapper"> 设置 <code>max-inline-size: 100%，并确保其 display: block（默认就是）
• 同时设 overflow-x: auto，这样超宽时才有滚动条
• table 本身保持 display: table（不要改 inline-table），并加 min-width: fit-content 或具体值（如 min-width: 800px），防止它被压缩变形
• 如果父容器有 writing-mode: vertical-rl 等非默认模式，max-inline-size 才会真正对应垂直方向最大高度——但这种情况极少用于表格布局

为什么不用 max-width，而要用 max-inline-size？

绝大多数场景下，max-width 完全够用，也更兼容（包括旧版 Safari 和 Outlook）。max-inline-size 的价值只在明确需要写作模式（writing-mode）自适应的多语言项目里：


使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Andr​​oid友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Andr​​oid应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
下载

比如你有一个支持中文竖排（writing-mode: vertical-rl）和阿拉伯语 RTL（direction: rtl）的国际化后台，且表格需在两种模式下都限制「行方向最大尺寸」——这时 max-inline-size: 100% 在竖排时限制的是高度，在横排时限制的是宽度，一套规则通吃；而 max-width 在竖排下就不管用了。

但注意：table 本身不继承 writing-mode，你得显式给包裹容器设，否则 max-inline-size 行为不可预测。

容易踩的坑：white-space 和 word-break 配合不到位

就算外层容器加了 max-inline-size 和 overflow-x: auto，如果 td 里有长 URL、Base64 字符串或无空格英文，依然会撑破容器、导致横向滚动失效。

必须同步处理单元格内容：

• td 上设 white-space: normal（不是 nowrap）
• 加 word-break: break-word 或 overflow-wrap: break-word（后者更现代）
• 避免在 td 上设 width 百分比却没配 table-layout: fixed，否则列宽计算混乱
• 图片记得加 max-width: 100%; height: auto;，否则它们是溢出主力

最麻烦的地方往往不在尺寸限制本身，而在内容断行策略是否与容器滚动机制对齐——漏掉其中一环，max-inline-size 就只是个摆设。

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