Cherry Studio 中文本换行失效，如何正确触发自动换行？

Question

在 Cherry Studio 中，文本换行失效是常见布局问题：用户输入长段落或英文连续字符（如 URL、代码片段）时，编辑器或预览区常出现横向溢出、撑破容器，而非自动折行。根本原因在于其默认 CSS 未对 `white-space` 和 `word-break` 进行合理约束——尤其 `

` 或自定义 Markdown 容器常继承 `white-space: pre`，禁用换行；而中英文混排时，`word-break: normal` 对中文无效（中文无空格分词），需显式启用 `word-break: break-word` 或更现代的 `overflow-wrap: break-word`。正确解法是在自定义 CSS 中针对 `.cherry-content p, .cherry-content li, .cherry-content td` 等文本容器统一设置：  
```css
white-space: normal;  
overflow-wrap: break-word;  
word-break: break-word; /* 兼容旧版浏览器 */
```  
若使用主题模板，还需检查是否被 `!important` 覆盖。调试建议：Chrome DevTools 中审查元素，确认 computed 样式生效。此配置兼顾中英文、URL 及 Emoji 的安全折行，无需修改源码，10 分钟即可修复。

Answer 1

```html

一、现象层：可复现的 UI 布局异常

在 Cherry Studio 的编辑预览区或导出 HTML 中，用户输入含长 URL（如 https://github.com/cherry-studio/cherry-studio/blob/main/packages/renderer/src/components/MarkdownRenderer.tsx）、无空格英文段落或混合 Emoji 的中文段落时，容器宽度被强行撑开，触发水平滚动条甚至破坏响应式布局。该问题在移动端尤为明显——文字不折行导致内容被裁剪，交互体验严重降级。

二、DOM 结构层：默认渲染语义与样式继承链

• Cherry Studio 默认将 Markdown 解析为标准 HTML：段落 → <p>，列表项 → <li>，表格单元格 → <td>，代码块 → <pre><code>
• 关键陷阱：<pre> 元素天然继承 white-space: pre，而多数主题 CSS 未重置其子容器（如 .cherry-content > *）的换行行为
• 通过 Chrome DevTools 的 Computed 面板可验证：`.cherry-content p` 的 white-space 值常为 inherit 或 pre-wrap，而非预期的 normal

三、CSS 渲染引擎层：三大换行属性的协同机制

CSS 属性	作用域	对中文/URL/Emoji 的有效性	浏览器兼容性备注
white-space: normal	启用空格折叠 + 自动换行	✅ 支持中文断行（按字）；✅ URL 中 / 和 . 可作断点	全浏览器支持
overflow-wrap: break-word	强制在长单词/URL 内部断行（即使无连字符）	✅ 破解连续 ASCII 字符溢出；✅ Emoji 序列（如 👨‍💻🚀）可整体保留在同一行或合理拆分	Chrome 58+ / Firefox 49+ / Safari 10.1+
word-break: break-word	旧规范兼容写法（等价于 overflow-wrap）	⚠️ IE/Edge Legacy 必需；但对 CJK 字符过度切割风险略高	IE 5.5+ / Edge 12–18

四、工程实践层：最小侵入式修复方案

无需修改 Cherry Studio 源码或 fork 主题，仅需在「设置 → 外观 → 自定义 CSS」中注入以下规则：

/* 针对所有常规文本流容器 */
.cherry-content p,
.cherry-content li,
.cherry-content td,
.cherry-content th,
.cherry-content blockquote p {
  white-space: normal;
  overflow-wrap: break-word;
  word-break: break-word; /* 兼容 IE/旧 Edge */
}

/* 特别保护：禁用 pre.code-block 的换行抑制（若需保留代码块原样，请勿加此行） */
.cherry-content pre:not(.code-block) {
  white-space: pre-wrap;
}

五、验证与调试层：闭环诊断流程图

graph TD
  A[复现问题文本] --> B{Chrome DevTools 审查元素}
  B --> C[定位到 .cherry-content p]
  C --> D[检查 Computed 样式中的 white-space/overflow-wrap/word-break]
  D --> E{是否生效？}
  E -->|否| F[检查 CSS 加载顺序 & !important 冲突]
  E -->|是| G[检查父容器 max-width / flex-shrink 是否为 0]
  F --> H[在 Custom CSS 末尾添加 !important 并标记注释]
  G --> I[添加 debug 边框验证盒模型]
  H --> J[刷新并验证 horizontal overflow 消失]
  I --> J

六、进阶防御层：面向未来的弹性适配策略

• 对于严格要求代码块不可折行的场景，建议使用 pre.code-block { overflow-x: auto; } 显式启用横向滚动，而非依赖 white-space: pre 的副作用
• 若集成 Tailwind CSS，可直接使用 break-words 工具类（底层即 overflow-wrap: break-word），并配合 whitespace-normal
• 长期建议向 Cherry Studio 提交 PR，在默认主题中将 .cherry-content :is(p, li, td, th) 的换行策略设为标准化基线，避免每个用户重复造轮子

```