html中没有maxwidth属性，控制文字最大宽度需用css的max-width配合display:block/inline-block/flex/grid等布局属性，并设置word-wrap:break-word或overflow-wrap:break-word处理长单词溢出。
HTML 中没有 maxwidth 属性，别被误导
HTML 元素本身不支持 maxwidth（这个属性根本不存在）。你看到的“文字最大宽度”控制，实际是 CSS 的职责，而且必须配合特定的显示行为才能生效。直接在 <p></p> 或 <span></span> 上写 maxwidth="300" 不起作用，浏览器会忽略它。
max-width 对文字生效的前提是元素要“可缩放”
纯文本默认是内联（inline）元素，max-width 对它无效。必须先让容器具备块级或弹性布局能力：
-
display: block（最常用，比如给<span></span>加） -
display: inline-block（保留行内流，但支持宽高限制） -
display: flex/display: grid（现代布局，max-width自然生效）
同时注意：仅设 max-width 不会自动折行，还需配合 word-wrap: break-word 或 overflow-wrap: break-word 处理长单词，否则超宽文字会溢出容器。
防止中英文混排文字撑破容器的实操组合
中文通常按字折行，但英文、URL、邮箱等连续无空格字符串极易突破 max-width。推荐用这套最小可用配置：
立即学习“前端免费学习笔记（深入）”；
div.text-container {
max-width: 300px;
word-break: break-word; /* 兼容老版 Chrome/Safari */
overflow-wrap: break-word; /* 标准写法，优先断长单词 */
word-wrap: break-word; /* 已废弃但仍有兼容需要 */
}说明：
-
word-break: break-word在旧版浏览器中更可靠，但可能在中文中间强行断行（不推荐单独用） -
overflow-wrap: break-word是 W3C 标准，只在必要时断长单词，对中文友好 - 若内容含大量代码或 URL，可加
hyphens: auto（需语言和浏览器支持）
用 ch 或 em 单位替代像素做更语义化的宽度控制
固定 px 宽度在响应式场景下僵硬。文字宽度本质是“能容纳多少字符”，可用字符单位：
-
max-width: 40ch≈ 最多显示约 40 个“0”字符的宽度（基于当前字体） -
max-width: 30em≈ 最多 30 倍当前font-size的宽度（适合标题类短文本）
注意：ch 单位对等宽字体（如 monospace）最准确；非等宽字体下会有轻微偏差，但比像素更贴近排版意图。
真正难的不是写哪行 CSS，而是判断该限制谁的宽度——是外层容器？还是某段动态插入的文案？后者往往需要 JS 配合 getBoundingClientRect() 或 scrollWidth 做运行时校验，纯 CSS 无法覆盖所有边界情况。
