CODEWITHSUNDEEP
csscjkword-break
Mechwd
Mechwd

Reputation: 400

Dealing with Korean text breaking words

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.

enter image description here

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

Upvotes: 6

Views: 7761

Answers (5)

Jezrel Dave
Jezrel Dave

Reputation: 99

Add both line-break:strict and word-break:keep-all into your CSS. This helps solve the problem for me.

Upvotes: 2

Manuel Cheța
Manuel Cheța

Reputation: 500

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.

Upvotes: 0

Scott
Scott

Reputation: 85

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

Upvotes: 4

insanehong
insanehong

Reputation: 91

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.

Upvotes: 5

Jukka K. Korpela
Jukka K. Korpela

Reputation: 201568

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. 십&nbsp;니까. Alternatively, wrap a sequence of characters that should not be broken in a span element and set white-space: nowrap on it.

Upvotes: 2

Related Questions