跳到主要内容

Toast 无断点长串正常换行 (WEB-1350)

版本： 0.9.1 · 类型： 🐛 Bug 修复

WEB-1350

问题​

Toast 文案中出现无天然断点的长串时——典型是文件名，如 已将 "320X240(1)_rmv8_904kbps_15fps_rma_44100hz_96.5kbps" 移动至 "cccc"——该长串会溢出所在行盒，与相邻文本视觉重叠。

根因​

TOAST_TITLE_CLASS 与 TOAST_DESCRIPTION_CLASS 沿用 CSS 默认的 overflow-wrap: normal，只在空格与 CJK 字符之间断行。下划线不是断点，所以整个文件名被视为一个不可断的 word：中文部分正常换行，中间的长串既断不开、也没有容器能兜住它。文本容器（TOAST_CONTENT_CLASS / TOAST_BODY_CLASS）带 min-w-0，允许收缩到窄于该长串的宽度；根节点又是 w-fit max-w-[420px]，无法靠变宽容纳。

改动文件​

  • packages/design/src/components/Toast/styles.ts
  • packages/design/src/components/Toast/__tests__/Toast.test.tsx

改动内容​

  1. styles.ts：给 TOAST_TITLE_CLASS 与 TOAST_DESCRIPTION_CLASS 增加 wrap-anywhere（overflow-wrap: anywhere）。
  2. Toast.test.tsx：新增单测，用含长文件名的 title / description 渲染，断言两个文本节点均带 wrap-anywhere。

为什么是 wrap-anywhere 而不是 break-words / break-all​

  • break-words（overflow-wrap: break-word）不参与 min-content 尺寸计算：容器仍按「长串不可断」得出固有宽度，在 w-fit + min-w-0 下收缩后照样溢出。anywhere 会把断点计入固有尺寸，容器才能正确收缩到 420px 内再断行。
  • break-all 会把正常英文单词也从中间劈开，中英混排文案观感差。

影响范围​

  • 含长文件名 / 长 URL / 长 token 的 Toast 文案在 420px 内正常折行，不再溢出重叠。
  • 常规文案排版不变——anywhere 只在没有其他断点可用时才生效。