移动端UTF-8韩文内容溢出父容器问题求助（Next.js+Tailwind）

核心修复方案 #

针对韩文这类无空格分隔的连续表意文字，需要添加强制换行规则，确保文本在容器边界自动折行：

1. 全局样式修复（推荐）
   在你的@layer base全局样式中，给所有元素添加换行规则：

@layer base {
  * {
    @apply box-border;
    overflow-wrap: break-word;
    /* 针对韩文更友好的规则：保留单词完整性，仅在必要时换行 */
    word-break: keep-all;
  }
  /* 下方保留你原有标题、段落等样式 */
}

2. 仅针对内容容器修复
   如果不想全局修改，直接给文章内容的prose容器添加Tailwind内置换行类：

<div className="prose prose-invert mx-auto max-w-prose prose-pre:max-w-[90vw] break-words">
  <ContentRenderer source={content} />
</div>

break-words等价于overflow-wrap: break-word，会让长文本在容器边缘自动折行。

问题原因 #

韩文属于无空格分隔的连续文本，浏览器默认不会自动拆分这类文本换行（拉丁文字靠空格识别换行点），导致长文本直接溢出容器边界。添加上述CSS规则后，浏览器会在容器宽度不足时强制拆分文本行，避免溢出。

额外优化（针对标题溢出） #

如果标题也出现类似问题，给标题集合添加换行规则：

:is(h1, h2, h3, h4, h5, h6) {
  word-break: keep-all;
  overflow-wrap: break-word;
  /* 保留你原有标题样式 */
}

内容的提问来源于stack exchange，提问作者Kaden Sungbin Cho