code标签为行内元素，min-width/max-width无效，需设display:inline-block/block；表格中需table-layout:fixed+显式列宽；优先控制父容器宽度而非code自身。
code 标签本身不支持 min-width / max-width 直接生效
code 是行内元素（display: inline），而 min-width 和 max-width 在 CSS 中**仅对块级元素、替换元素或 display 为 inline-block/inline-flex 等元素起作用**。直接给 code 写 min-width: 120px 不会生效，浏览器会忽略它。
常见错误现象：样式写了但宽度毫无变化，inspect 元素发现 computed width 仍是 auto，且 min-width 显示为 crossed out。
- 必须先改变 display 类型，例如：
code { display: inline-block; min-width: 100px; } - 若需换行或独占一行，改用
display: block，再配white-space: pre-wrap保留空格与换行 - 避免用
display: inline-flex—— 它会让子元素（如文本）布局异常，且不必要地增加复杂度
设置 code 块的最小/最大宽度要兼顾内容可读性
代码片段常含长单词、无空格 URL 或 base64 字符串，单纯设 min-width 可能导致横向滚动或溢出容器。真正实用的组合是：
code { display: inline-block; min-width: 120px; max-width: 100%; overflow-x: auto; white-space: nowrap; }- 若嵌在段落中怕撑破布局，加
vertical-align: middle对齐基线 - 用
box-sizing: border-box防止 padding/border 溢出设定的max-width - 注意：百分比
max-width基于父容器宽度计算，不是视口；固定值如max-width: 600px更可控
table 中的 code 标签宽度控制更麻烦
当 code 放在 td 里，而表格又用了 table-layout: auto（默认），即使你给 code 设了 display: inline-block; min-width: 150px，整列仍可能被短内容（如 "OK"）压扁 —— 因为列宽由 td 内容自然宽度决定，code 的约束被忽略。
- 必须对
table设置table-layout: fixed，并配合width: 100% - 用
col或th:first-child显式定义列宽，例如：col:nth-child(3) { width: 200px; } - 再给该列的
code加display: inline-block; overflow-x: auto;，否则长代码会撑破单元格 - 别依赖
td { min-width: 200px }—— 它在auto布局下基本无效，fixed下又只看首行
真正需要“最小代码块宽度”的场景很少
多数时候你要的不是 code 自身有最小宽度，而是防止它在窄容器中被压缩到无法识别字符。这时候更合理的做法是限制其**父容器**的宽度行为，而非硬塞 min-width 到 code 上。
- 给包裹
code的pre或div设min-width，例如：pre { min-width: 300px; } - 用
code+pre组合时，pre默认是块级，天然支持min-width和max-width - 如果只是想让单行代码不被挤成一团，
white-space: nowrap比min-width更直接有效 - 移动端慎用固定
min-width—— 320px 屏幕上设min-width: 400px会导致强制横向滚动，体验反而更差
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
