Dealing with Korean text breaking words

Question

I am building a website where I am displaying korean text. The client (US local) is being very unhappy because the text is breaking in the middle of words. As example of this, here is an image: Red background text being one word.

I have tried to use

word-break: keep-all;

but it isn't supported in Chrome/Safari.

What am I able to do? I have searched the web for hours and got nothing. Is this something that is expected in cjk sites or is there a solution that I haven't found.

It is a responsive site, so I can't put in hard breaks, or fake it.

demo: http://codepen.io/cibgraphics/pen/tqzfG

Answer 1

You can try a mixed solution in which you use CSS and JS in order to simulate words and then move them to a new line if the width is not enough.

The test I did uses a CSS class with display inline-block and then wraps each Korean word into spans. CSS

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

The use a JS/jQuery code like this:

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);

The code simply takes in a text, looks at things which are NOT spaces and then puts those things into span HTML elements. This way you force a word to go to new line.

Answer 2

The SPACE character generally allows a line break. This is not affected by the word-break property. To disallow a line break, use NO-BREAK SPACE instead of SPACE, e.g. 십 니까. Alternatively, wrap a sequence of characters that should not be broken in a span element and set white-space: nowrap on it.

Answer 3

Use the CSS rule word-break: keep-all. It's now supported in all browsers but Microsoft Edge (a change since 2014 when the accepted answer above was posted).

Answer 4

Why not use jquery plugin - https://github.com/mytory/jquery-word-break-keep-all

This plugin is for it. IE has CSS property word-break: keep-all; but other browser has not.