<code>标签内长代码仍换行，因其默认为内联元素且white-space按normal处理，斜杠、连字符等成断点；需同时设置display: inline-block、white-space: nowrap和overflow: hidden才生效。
为什么标签里的长代码还是会换行</H3>
<p>因为<code>默认是内联元素，且浏览器对它的<code>white-space
处理沿用normal——空格、连字符、斜杠等都可能成为换行断点。尤其在响应式容器中，一段长路径如/usr/local/share/nginx/html/config.js很容易被拆开，破坏可读性。
white-space: nowrap必须配overflow和display
white-space: nowrap必须配overflow和display
只写code { white-space: nowrap; }基本无效：内联元素不响应overflow，也不受width约束。真正起效要三件套同时存在：
• 给code加display: inline-block或block（推荐inline-block以保持行内流）
• 必须设white-space: nowrap
• 必须配overflow: hidden（否则超出部分仍会撑宽父容器）
• 如需省略号，再加text-overflow: ellipsis（但仅对单行有效）
表格里嵌标签时换行失效的根源</H3>
<p>如果<code>code
放在td里，即使加了上述样式，大概率还是换行——因为表格默认table-layout: auto，列宽由内容决定，nowrap根本没“边界”可参照。必须：
立即学习“前端免费学习笔记（深入）”；
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
• 在table上设table-layout: fixed和width
• 给对应col或td设明确宽度（如width: 200px）
• td本身也要加white-space: nowrap和overflow: hidden，否则子元素code的样式会被继承链覆盖
contenteditable中标签按Enter仍换行怎么办</H3>
<p>当<code>code
作为contenteditable区域的子元素时，用户按Enter会插入<div>或<p>，直接破坏单行结构。CSS完全失效，必须用JS拦截：
• 监听keydown事件，对e.key === 'Enter'调用e.preventDefault()
• 同时监听paste，用e.clipboardData.getData('text/plain')提取纯文本，并清除其中的\r\n
• 注意：Safari下光标可能卡住，建议加style="-webkit-appearance: none"避免干扰
最易被忽略的是 display 类型和 overflow 的绑定关系——white-space: nowrap只是告诉浏览器“别自动断”，但是否截断、是否隐藏、是否显示省略号，全取决于它运行在哪种盒模型里。没display，它就是个哑指令。
