0

In HTML and CSS, how do I make japanese text break lines correctly?

I like to use the CSS word-break:keep-all on my websites to stop Japanese kanji being broken in a weird way but what is the difference between word-break:keep-all, white-space:nowrap and overflow-wrap:break-word when using Japanese text?

<p style="word-break:keep-all">日本語, 漢字, ご返事, 文字, お寿司, 漢字, また, 文字, 日本語, 漢字, また, 文字, グレン</p>
Penny Liu
  • 15,447
  • 5
  • 79
  • 98
Glen Charles Rowell
  • 31
  • 6
  • Why do you not want to break kanji? That's the normal thing to do and that's exactly where the difference is: `normal` breaks only CJK words and not latin ones. – Kaiido Mar 11 '20 at 06:49
  • 1
    Sometimes Japanese words are split is weird ways like: 日本 on one line and 語 on the second line, at the end of a list. I'm not a sure why this happens but think it always looks better when the words are not split. I realize Japanese is a language that doesn't need spaces at times but have always been looking for a way to control where the splits happen. I'm happy to use any CSS but I'm not sure what the best option is. Any help here is greatly appreciated. – Glen Charles Rowell Mar 16 '20 at 20:46

0 Answers0