当我使用韩语时，CSS“分词”不起作用

Question

我想用单词对标签进行换行。我使用了各种CSS，但它不起作用。 我使用了“word-break：break-word”、“word-wrap：break-word”和“overflow-wrap：break-word”。 他们都没有工作。 我想知道为什么。 当我将韩语放入跨度标签时，“分词”不起作用。但是当我将英语放入 span 标签时，它就起作用了。 这是 React 项目。 谢谢你帮助我:)

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

Answer 1

您似乎想要将断字 CSS 应用于 React 项目中的韩语文本，但您遇到了问题。该问题可能与韩文字符的断词处理方式有关。

在韩语中，不像英语那样使用空格来分隔单词，因此浏览器可能很难确定在哪里断开单词。为了解决这个问题，您可以尝试将CSS属性

wordBreak: 'keep-all'

添加到span样式中。

keep-all

值是为韩语等语言设计的，其中任何两个字符之间都可能发生中断。

这是代码的更新版本：

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

这应该有助于解决韩文文本的断字问题。如果您仍然遇到问题，请考虑检查父容器是否有任何可能影响文本布局的样式。