在网页国际化项目中，韩文与英文混合排版是常见需求。韩文本身由音节块组成，浏览器通常将其视为可逐字断开的书写系统；而英文等西文则以空格为天然分隔，连续字母构成的长单词不会主动折行。当两者共处同一段落且容器宽度有限时，若西文出现超长无空格字符串，就可能溢出卡片或导致韩文被迫整体移位。理解CSS中控制换行的属性，尤其是word-wrap（即overflow-wrap的别名），是处理这类混排问题的关键。
一、word-wrap的基础机制
word-wrap属性最早由微软提出，后被CSS3文本模块标准化为overflow-wrap，但word-wrap仍作为兼容别名广泛支持。它的核心作用是：当行内一个整词太长、放不进当前行时，是否允许在词内断开。默认值为normal，表示只在约定的断点（如空格、连字符）换行；若设为break-word，则浏览器可在任意字符处截断该词以防止溢出。
在韩英混排场景里，韩文段落本身能在音节间自然换行，问题多出自夹杂的英文品牌名、URL或技术术语。例如“삼성Electronics주식회사”中，Electronics若是一个无空格长串，normal模式下可能冲破容器。此时break-word能让它在边缘处切分，保证布局完整。下面是一段基础演示代码：
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<style>
.box {
width: 200px;
border: 1px solid #ccc;
word-wrap: break-word;
}
</style>
</head>
<body>
<div class="box">
한국어와EnglishMixedVeryLongWord사이의排版 테스트입니다.
</div>
</body>
</html>
上述代码中，容器宽度仅200px，西文长词在break-word作用下被强制断行，韩文部分则维持原有节奏。若去掉该属性，长词将撑宽盒子。需要注意的是，word-wrap只影响“是否断词”，不改动韩文自身的换行许可，因此韩文依旧可按音节折返。
二、与word-break的协同和区别
很多开发者容易混淆word-wrap与word-break。后者更激进，例如word-break: break-all会令所有文字（含西文）忽略空格、在任意字符间断行，这虽能彻底防溢出，却会破坏英文单词可读性，也让韩文显得零散。相比之下，word-wrap: break-word仅对“放不下的长词”动手，正常短词仍留空格处断行，对韩文混排更友好。
实际项目中，推荐以word-wrap: break-word为主，仅在特殊场景（如展示哈希值）叠加word-break: break-all。以下代码展示组合用法及效果差异：
/* 推荐：温和断词，保护西文单词 */
.mixed-text {
word-wrap: break-word;
overflow-wrap: break-word; /* 标准名，等价 */
}
/* 极端：所有字符可断，韩文也会被拆散 */
.hash-text {
word-break: break-all;
}
从渲染表现看，mixed-text中的韩文“안녕하세요”与英文“hello”相邻时，仅在英文过长才切词；hash-text则连“안녕”都可能从中间断开。对面向韩语用户的界面，前者体验远优于后者。因此控制混排首要是选对属性粒度，而非一味打断。
三、line-break与字体因素的补充
除word-wrap外，line-break属性也会影响CJK与韩文标点处的换行严格度，但对西文长词无直接作用。另外，若西文使用等宽字体、韩文使用无衬线字体，视觉基线差异可能放大换行错位感。建议在body设定font-family时，将韩文字体（如Apple SD Gothic Neo）置于英文前面，并利用word-wrap兜底防溢。
下面给出一个较完整的排版样式模板，兼顾混排美观与稳定：
body {
font-family: "Apple SD Gothic Neo", "Segoe UI", sans-serif;
line-height: 1.6;
}
.article {
width: 100%;
max-width: 640px;
padding: 12px;
box-sizing: border-box;
word-wrap: break-word;
overflow-wrap: break-word;
}
该模板中，max-width配合盒模型避免横向滚动，word-wrap双写确保旧版IE与新浏览器一致。韩文读者在手机端阅读韩英混杂的新闻或说明书时，既不会遇到文字飞出屏幕，也不会因频繁断词降低阅读速度。掌握这些要点，便能从容应对多数韩文与西文混排挑战。