css "word break" is not working when I use Korean

Issue

I want to line break the tag with word. I used various css but it isn't working. I used "word-break: break-word" , "word-wrap:break-word", and "overflow-wrap: break-word". All of them not working. I want to know why. When I put Korean in the span tag, "word break" is not working. but when I put English in the span tag, It is working. This is React project. Thank you for helping me :)

<td style={{ position: 'relative'}}>
  <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center'}}>
    <span style={{ display: 'inline-block', width: '6.25rem', whiteSpace: 'normal', wordBreak: 'break-word'}}>유음의 단순화</span>
    </div>
</div>

Solution

It looks like you want to apply word-breaking CSS to a Korean text within a React project, but you're experiencing issues. The problem might be related to the way the Korean characters are treated in terms of word-breaking.

In Korean, spaces are not used to separate words like in English, so the browser might have difficulty determining where to break the words. To address this, you can try adding the CSS property wordBreak: 'keep-all' to the span style. The keep-all value is designed for languages like Korean, where breaking can occur between any two characters.

Here's an updated version of your code:

<td style={{ position: 'relative'}}>
  <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center'}}>
    <span style={{ display: 'inline-block', width: '6.25rem', whiteSpace: 'normal', wordBreak: 'keep-all'}}>유음의 단순화</span>
  </div>
</td>

This should help with the word-breaking issue for Korean text. If you still encounter problems, consider checking the parent containers for any styles that might be affecting the text layout.

Answered By - Qitmeer Raza