单独使用会导致移动端显示不全，因其为行内元素且忽略换行与空格；须嵌套于中并配合white-space:pre-wrap、overflow-x:auto、等宽字体及字号适配等css才能正常显示。
<code> 标签本身不会导致移动端显示不全——真正出问题的是它常被孤立使用，没配合 <pre class="brush:php;toolbar:false;"></pre> 保留换行与空格，也没加 CSS 控制溢出和字体，结果长代码在小屏上直接撑破容器、文字挤成一团、横向滚动失效。
为什么<code>单独用在手机上会“消失”或截断
浏览器把 <code> 当作行内元素，默认不换行、忽略多余空格和换行符。一段多行 JS 代码写进 <code> 里，手机上就变成一长串糊在一起的字符；如果父容器宽度不够，内容还会被 overflow: hidden 切掉（尤其 iOS Safari 默认行为）。
- 没包裹
<pre class="brush:php;toolbar:false;"></pre>→ 换行、缩进全部丢失 - 没设
white-space: pre-wrap或pre-line→ 浏览器自动折叠空白 - 没限制最大宽度或启用横向滚动 → 宽代码块直接溢出视口，部分内容不可见
- 用了固定
font-size: 14px→ 在小屏上文字过小，用户放大后又可能触发布局错乱
必须加的 CSS 才能让 <code> 在手机上可读
仅靠 HTML 标签远远不够，得靠这几条最小必要样式：
- 给
<pre class="brush:php;toolbar:false;"><code></code> 组合加 <code>white-space: pre-wrap</code>：保留换行和空格，同时允许自动折行</pre> - 加
overflow-x: auto和max-width: 100%：防止宽代码横向溢出，出现滚动条而非截断 - 字体用
font-family: ui-monospace, 'SFMono-Regular', Consolas, monospace：iOS/Android 都有对应等宽字体 fallback - 字号改用
font-size: 0.875rem或clamp(0.75rem, 0.875rem, 1rem)：兼顾小屏可读性和大屏清晰度 - 别漏
tab-size: 4：否则缩进在 Android WebView 里可能错位
HTML 结构错误写法 vs 正确嵌套方式
错误写法是只用 <code> 包一段多行代码，或者把 <pre class="brush:php;toolbar:false;"></pre> 和 <code> 顺序颠倒：
<!-- ❌ 错误：没 pre，换行全丢 -->
<p>执行命令：<code>npm run build</code></p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill8714" title="HTML汇报生成器"><img
src="https://img.php.cn/upload/skill/000/000/081/179220974213190.jpg" alt="HTML汇报生成器" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/skill8714" title="HTML汇报生成器" class="overflowclass">HTML汇报生成器</a>
<p class="overflowclass">🚀 不用写一行代码！把项目总结、工作汇报、研究报告、技术文档、提案、数据看板直接变精美HTML。12种主题 × 11种背景动效 × 9种鼠标特效 × 10种边框样式 × 实时调色器 × 毛玻璃卡片 × PDF导出，生成后还能自由调色，零门槛AI直出。触发词：项目总结、工作汇报、PPT、生成报告、做个总结、HTML文档、数据报告、流程文档、会议纪要、技术文档、研究报告、数据看板、提案、做个展示页、帮我做个汇报、文档生成。</p>
</div>
<a rel="nofollow" href="/xiazai/skill8714" title="HTML汇报生成器" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div>
<p><!-- ❌ 错误：pre 在外但没设样式，iOS 可能撑破容器 -->
</p><pre class="brush:php;toolbar:false;"><code class="js">function foo() {
console.log('hello');
}</code>
正确结构必须是 <pre class="brush:php;toolbar:false;"></pre> 包 <code>，且带语义类和最小样式：
<!-- ✅ 正确：语义清晰 + 样式兜底 -->
<pre class="code-block"><code class="js">function foo() {
console.log('hello');
}</code>
对应 CSS 至少含：
.code-block {
margin: 0.5em 0;
padding: 0.75em;
background: #f6f6f6;
border-radius: 4px;
overflow-x: auto;
max-width: 100%;
}
.code-block code {
display: block;
font-family: ui-monospace, 'SFMono-Regular', Consolas, monospace;
font-size: clamp(0.75rem, 0.875rem, 1rem);
white-space: pre-wrap;
tab-size: 4;
}
特殊字符没转义会导致代码“显示不全”
直接把含 、<code>>、& 的代码塞进 <code>，浏览器会误解析为标签，后续内容直接消失——这不是移动端特有，但在手机上更难排查（控制台不易开）。
- 手写 HTML 时，必须把
写成 <code><，>写成>，&写成& - 服务端渲染或 Markdown 转 HTML 工具（如 marked、remark）要确认开启了 HTML 转义选项
- 若用 JS 动态插入代码，别用
innerHTML，改用textContent+createElement('code')，再设textContent值
最易被忽略的一点：iOS Safari 对 <pre class="brush:php;toolbar:false;"></pre> 的 line-height 渲染偏高，若没显式设 line-height: 1.4，多行代码之间空隙过大，视觉上像“断开”或“漏内容”。这不是 bug，是默认值差异，必须手动覆盖。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
