css - 处理韩文断词

Question

我正在建立一个显示韩文的网站。客户（美国本地）非常不高兴，因为文本在单词中间中断。例如，这里有一张图片：红色背景文字是一个单词。

我试过用

word-break: keep-all;

但它在 Chrome/Safari 中不受支持。

我能做什么？我已经在网上搜索了几个小时，但一无所获。这是 cjk 网站所期望的，还是我没有找到的解决方案。

这是一个响应式网站，所以我不能硬中断或伪造它。

演示：http ://codepen.io/cibgraphics/pen/tqzfG

Answer 1

为什么不使用 jquery 插件 - https://github.com/mytory/jquery-word-break-keep-all

这个插件就是为它准备的。IE 有 CSS 属性 word-break: keep-all; 但其他浏览器没有。

Answer 2

SPACE 字符通常允许换行。这不受word-break财产的影响。要禁止换行，请使用 NO-BREAK SPACE 代替 SPACE，例如십 니까. 或者，将不应被破坏的字符序列包装在span元素中并white-space: nowrap在其上设置。

Answer 3

使用 CSS 规则word-break: keep-all。现在所有浏览器都支持它，但 Microsoft Edge （自 2014 年发布上述接受的答案以来发生了变化）。

Answer 4

您可以尝试混合解决方案，使用 CSS 和 JS 来模拟单词，然后在宽度不够时将它们移动到新行。

我所做的测试使用了一个带有 display inline-block 的 CSS 类，然后将每个韩语单词包装成 span。CSS

.korean-word {
   display: inline-block;
}

使用这样的 JS/jQuery 代码：

var p = $(".hero__description");
var text = p.text();
var nospace = /(\S+)/g;
var p1 = text.replace(nospace, "<span class='korean-word'>$1</span>");
p.html(p1);

该代码只是接收一个文本，查看不是空格的内容，然后将这些内容放入 span HTML 元素中。这样你就可以强制一个单词换行。

Answer 5

将两者都添加line-break:strict到word-break:keep-all您的 CSS 中。这有助于为我解决问题。