<code>标签文本移动端换行、桌面端正常的原因及解决方法

你遇到的问题大概率是父元素（比如表格单元格）的换行规则覆盖了<code>标签的white-space: nowrap设置，或是<code>的样式被其他CSS规则优先级压制了。可以尝试以下几种方案：

• 强制<code>标签保持行内不换行：
  给<code>标签添加更高优先级的样式，确保nowrap规则生效：

  code {
    white-space: nowrap !important;
    word-break: keep-all; /* 阻止单词被拆分换行 */
    display: inline; /* 确保保持行内元素特性，避免被意外块级化 */
  }
  

• 调整父容器的换行行为：
  如果<description>所在的容器（比如表格单元格）设置了word-break: break-all或overflow-wrap: break-word，这些规则会强制内容换行，即使子元素设置了nowrap。可以给父容器针对<code>标签做例外处理：

  .description-cell code {
    white-space: nowrap;
    word-break: normal;
  }
  

• 排查样式优先级冲突：
  用浏览器开发者工具（F12）选中<code>元素，查看「Computed」面板里的white-space属性，确认是否被其他CSS规则（比如更具体的选择器或!important规则）覆盖。如果是，调整你的选择器优先级（比如增加父元素类名）来覆盖原有规则。

• 弹性布局下的特殊处理：
  如果<description>所在容器使用了flex布局，可能需要给<code>标签添加flex-shrink: 0，防止它被压缩换行：

  code {
    flex-shrink: 0;
    white-space: nowrap;
  }
  

内容的提问来源于stack exchange，提问作者PencilKnot