Work with Korean text words

Question

I am creating a website where I display Korean text. The client (local USA) is very unhappy because the text breaks in the middle of the words. As an example of this, here is an image: Red background text is one word.

I tried to use

word-break: keep-all; 

but it is not supported in Chrome / Safari.

What can I do? I searched the Internet for many hours and received nothing. This is what is expected on cjk sites or there is a solution that I have not found.

This is a responsive site, so I cannot go into difficult breaks or fake it.

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

Answer 1

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

This plugin is for this. IE has the CSS property word-break: keep-all; but there is no other browser.

Answer 2

The SPACE character usually allows a line break. This does not affect the word-break property. To prevent line breaks, use NO-BREAK SPACE instead of SPACE, for example. 십 니까 . Alternatively, wrap a sequence of characters that should not be broken in the span element and set white-space: nowrap .

Answer 3

Use the CSS rule word-break: keep-all . Now supported in all browsers , but Microsoft Edge (change from 2014, when the accepted answer was posted above).

Answer 4

You can try a mixed solution in which you use CSS and JS to mimic words and then move them to a new line if they aren’t enough.

The test I used uses a CSS class with a built-in display unit, and then completes each Korean word in between. CSS

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

Use the JS / jQuery code as follows:

 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 the text, looks at things that are NOT spaces, and then puts these things in the elements of the HTML range. Thus, you force the word to jump to a new line.