韩文是一种以空格分隔词语的语言，但在很多网页上你会发现韩文段落被浏览器从任意位置切断，导致单词含义被拆散，阅读体验非常糟糕。这个问题的根源在于CSS的换行规则设置，尤其是word-break属性。理解这个属性的工作机制，才能做出符合韩文排版习惯的页面。
一、韩文换行的特殊性在哪里
韩文（谚文）由音节块组成，每个音节块在Unicode中占据一个独立的码位，例如 한、국、어 都是独立的字符。这与中文的方块字类似，所以浏览器在默认情况下允许在任意两个韩文字符之间换行，这就是韩文排版混乱的起点。
举个例子，한국어这个词由三个字符组成，默认规则下浏览器可以在 한 和 국 之间换行，也可以在 국 和 어 之间换行。虽然韩国国立国语院的规范要求「仅在空格处换行，或者遵循特定规则」，但CSS的默认行为并不会自动遵守这些规范。
更麻烦的是，韩文单词之间存在空格，但一些语法成分（如助词 이、가、은、는）通常紧跟在名词后面不加空格。如果换行发生在名词和助词之间，读起来会非常别扭。所以韩文排版需要明确告诉浏览器：请把空格之间的内容当作一个整体，不要随意拆分。
看一个默认行为的效果：
<style>
.default {
width: 200px;
border: 1px solid #ccc;
}
</style>
<p class="default">한국어를 공부하고 있습니다. 오늘은 CSS를 배웁니다.</p>
<!-- 韩文会被从单词中间任意截断 -->二、word-break的三个核心取值
word-break属性决定了文本在容器内如何断行，它有三个常用取值：normal、break-all和keep-all。其中对韩文影响最大的是keep-all。
1. normal：浏览器默认行为
normal遵循各语言的默认断行规则。对拉丁文字（英文）来说是按单词断行，遇到空格或连字符才换行；但对CJK文字（包括韩文），normal允许在任意字符间断行。这就是为什么韩文页面在不做任何设置时容易出现词中断行的原因。
2. keep-all：韩文排版的正确姿势
keep-all的意思是「禁止在CJK字符内部断行」，韩文、中文、日文都会被当作完整的单词处理，只在空格处换行。这正是韩文排版最需要的行为。
.korean-text {
word-break: keep-all;
width: 200px;
}
/* 完整示例 */
.keep-all-demo {
word-break: keep-all;
overflow-wrap: break-word; /* 防止超长单词溢出容器 */
line-height: 1.6;
padding: 10px;
border: 1px solid #ddd;
}设置了keep-all之后，한국어를 공부하고 있습니다这段文字只会在空格处换行，单词本身完整保留。但要注意一个副作用：如果某个没有空格的长字符串超过了容器宽度，文本会溢出容器边界，所以通常需要配合overflow-wrap: break-word作为兜底，允许极端情况下强制断行。
3. break-all：任意位置强制断行
break-all则相反，它允许在任何字符之间断行，包括英文单词内部。这种取值适合处理长URL、哈希值这类没有自然断点的字符串，但用在韩文正文排版上并不合适，它会加剧词中断行的问题。
<div style="width:150px;word-break:break-all;"> 한국어 텍스트 abcdefghijklmnopqrstuvwxyz </div> <!-- 英文长单词和韩文都会被硬性切断 -->
三、word-break与overflow-wrap、line-break的区别
很多开发者容易把这几个属性混为一谈，实际上它们各司其职。word-break定义的是「能不能在字符间断行」的规则；overflow-wrap（旧名word-wrap）只在单词整体放不下容器时才允许强制断行，优先级是先尽量不拆词；line-break则控制CJK标点、日文禁则等细节规则。
一个实用的组合是：韩文正文用keep-all，同时加上overflow-wrap: break-word。这样正常情况下按空格换行，遇到超长无空格字符串时也不会撑破布局。代码如下：
.korean-article {
word-break: keep-all; /* 只在空格处换行 */
overflow-wrap: break-word; /* 超长字符串兜底 */
line-break: strict; /* 严格标点禁则 */
word-wrap: break-word; /* 兼容旧浏览器 */
}
/* 针对代码或URL片段单独放开限制 */
.korean-article code,
.korean-article .url {
word-break: break-all;
}需要注意浏览器兼容性：keep-all在现代浏览器中支持良好，包括Chrome、Firefox、Safari和Edge，但在一些老旧的移动端WebView中可能表现不一致。建议在关键布局上同时测试iOS和Android的浏览器表现。
四、多语言混合排版的实战技巧
真实的韩文页面往往夹杂英文、数字和中文，比如 한글输入法说明、技术文档里的CSS术语等。混合内容的换行策略需要分层设置：全局使用keep-all，对英文代码片段局部使用break-all。
<style>
body {
word-break: keep-all;
overflow-wrap: break-word;
}
.tech-term {
word-break: break-all; /* 英文长术语允许截断 */
font-family: monospace;
}
.cjk-note {
word-break: keep-all; /* 中文注释同样受益于keep-all */
}
</style>
<p>한국어 본문 텍스트에 <span class="tech-term">verylongenglishword</span> 가 포함된 경우.</p>另一个常见坑是white-space与word-break的冲突。如果设置了white-space: nowrap，文本根本不会换行，word-break自然失效；而white-space: pre会保留源码中的换行符，可能让排版完全脱离预期。排查换行问题时，先用开发者工具检查元素上最终生效的white-space值，再确认word-break，能少走很多弯路。
最后补充一点，韩文排版规范中还涉及「头悬法」（타이포그래피 규칙），即行首不能出现句号、逗号等标点，行尾不能出现开引号。这部分细节由line-break属性和浏览器内置的禁则处理负责，设置line-break: strict可以获得更严格的标点处理。把这些属性组合起来，一个符合韩文阅读习惯的文本排版就基本成型了。
word-break韩文换行CSS文本换行修改时间：2026-09-15 15:48:37