通过 min-content 关键字配合浏览器前缀，可使块级容器宽度收缩至其内部换行文本的最小固有宽度，无需 JavaScript 即可实现“文字撑开、自动截断、宽度统一”的效果。
通过 `min-content` 关键字配合浏览器前缀，可使块级容器宽度收缩至其内部换行文本的最小固有宽度，无需 javascript 即可实现“文字撑开、自动截断、宽度统一”的效果。
在默认行为下，设置了 max-width 和 display: inline-block 的 <div> 会以 <code>max-width 为上限扩展自身宽度，即使内部文本因空间不足而换行，容器仍倾向于占据尽可能宽的空间（如 100px），导致不同长度文本的容器宽度不一致。
要让容器严格贴合换行后文本的实际视觉宽度（即取所有换行行中最长一行的宽度），应使用 width: min-content。该关键字指示浏览器将元素宽度设为其内容在不换行前提下的最小固有宽度——但结合 max-width 和自然换行机制后，它实际表现为：容器收缩到能容纳最长换行行所需的最小宽度。
以下是完整、跨浏览器兼容的实现方案：
div {
border: 1px solid red;
max-width: 100px;
display: inline-block;
/* 三重声明确保主流浏览器支持 */
width: -moz-min-content; /* Firefox */
width: -webkit-min-content; /* Chrome, Safari, Opera (旧版) */
width: min-content; /* 标准语法（Edge 16+, Chrome 66+, Safari 15.4+） */
}对应 HTML：
立即学习“前端免费学习笔记（深入）”；
<div>qwertyuiop</div> <div>qwertyuiop qwertyuiop</div>
✅ 效果说明：
- 两段文本均受
max-width: 100px限制，超长时自动换行； -
min-content使容器不再“预留空白”，而是紧贴换行后最长行的像素宽度（例如第二段中某一行恰好为 98px，则两容器均宽约 98px）； - 因此两个
<div> 将呈现<strong>完全一致的宽度</strong>，视觉上对齐统一。<p>⚠️ 注意事项： </p> <ul> <li> <code>min-content不是“逐字符缩放”，而是基于字体度量与空格断点计算的布局宽度，依赖浏览器渲染引擎； - 在非常窄的
max-width下（如30px），若单个单词无法折行（如无连字符或word-break: break-all），可能仍溢出，此时需补充overflow-wrap: break-word或word-break: break-word； - 旧版浏览器（如 IE、Safari min-content，若需兼容，须降级为 JavaScript 动态测量（但本题明确要求纯 CSS 解法，故不展开）。
总结：min-content 是现代 CSS 中解决“容器随换行文本自适应缩放”问题的标准、简洁且高效的方式，合理搭配前缀即可在当前主流环境中稳定运行。
