How to make beautiful line breaks in Japanese?

Question

I have a website in English and Japanese. English is displayed perfectly.

There are problems with hyphenation in Japanese. Sometimes hanging 1-2 characters remain on a new line.

I want to manage the hyphenation and put it where I need to.

I split the Japanese text into syllables. https://github.com/google/budou

I unite the syllables with a space \u200A. (thin space) Space selected so that it was the minimum width and was invisible. I hope to get line breaks where this space is.

But line breaks is carried out not by spaces, but by width.

What can you think of for hyphenation management?

Text income from an API, I can’t just insert the <br> tag

Answer 1

I have no experience with Japanese in HTML, but maybe you can use word-break:keep-all;?

According to Mozilla:

keep-all

Word breaks should not be used for Chinese/Japanese/Korean (CJK) text. Non-CJK text behavior is the same as for normal.

div {
  display:inline-block;
  font-size:30px;
  width:100px;
  border:1px solid black;
}
.break {
  word-break:keep-all;
}

<div>寿司が&#x200a;好き&#x200a;です</div>
<div class="break">寿司が&#x200a;好き&#x200a;です</div>