处理韩文破文字

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。它现在是supported in all browsers但是微软边缘（自2014年以来，上面接受的答案发布后发生了变化）。

Answer 4

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

我做的测试使用带有显示内联块的CSS类，然后将每个韩语单词换成跨度。 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中。这有助于为我解决问题。