韩语句子被随机分割答案

【问题标题】：Korean sentences being split randomly韩语句子被随机分割
【发布时间】：2018-07-14 02:38:43
【问题描述】：

我在这里遇到了一个问题：我有一个韩文十进制 Unicode 文本，文本显示为 4 列和多行（因为它是语言测试的答案）。问题在于，因为每个答案的宽度都是 20%，所以当它不适合时，句子会在单词中间随机拆分，而不是在单词之间的空格中。我不知道如何处理这个问题，因为这个文本是从数据库中自动加载和显示的。

4 列中每一列的 HTML 代码如下：

<table class="courses" border="0" cellpadding="2" cellspacing="2" width="100%" style="font-size:13px;">
  <tbody>
    <td width="20%">
     <p align="center">
       <input name="a[X]" value=1" type="radio">
       <br>
       <?php echo "&#48148;&#49240;&#47732; &#44032;&#51648; &#47560;&#49464;&#50836;" ?> // this comes from a DB, its the unicodes of the korean characters<br>
    </p>
   </td>
</tbody>
</table>

我可以做些什么来解决这个问题，当它不合适时，避免随机拆分，而是在句子结束时这样做？如果您注意到 Unicode 代码，您可以看出 ;면 가 之间有一个空格，但它会在任何地方中断，所有文本都一样。

（请注意，没有任何编码问题，韩语字符显示正常。其他语言如瑞典语或西班牙语不会出现这种情况）。

编辑

这是working example。

请注意，在示例中，第一个答案被拆分为最后两个字符，当该单词有五个字符时，因此应该在前面拆分 3 个字符。

【问题讨论】：

所有浏览器都会出现这种情况吗？我认为这个问题可能是特定于浏览器的，所以它至少应该提到一些有关受影响的浏览器的信息。
这个表所在的容器有多大？您的示例中的字符很少。我没有看到任何不自然/意外的休息时间。
发生在 Chrome 和 Firefox 中，没有机会用 IE 测试。
您能否提供一个jsfiddle.net，其中包含您的表格的标记/css 以及我们可以玩的足够大的字符样本？
我用 jsfiddle 示例编辑了这个问题 :)

标签： html css unicode

【解决方案1】：

鉴于当前的网络标准状态，CJK（中文/日文/韩文）文本的换行可能会出现很大问题。

以与语言无关的方式，您无能为力； CSS level 3 定义了related attributes（line-break 和word-break），但我不太确定现代浏览器的支持级别是多少（显然不太现代的浏览器完全不适用）。

【讨论】：

打败我。作为参考，word wrap 上的维基百科文章“在中文、日文和韩文中，每个汉字通常被视为一个单词，因此自动换行通常可以发生在任何汉字之前和之后。”

【解决方案2】：

这并不重要，因为无论如何韩语都可以在任何地方拆分。查看来自 Chosun.com 的截图：

这些词在任何地方都被剪切，似乎是随机的。您无需担心连字符。

【讨论】：

【解决方案3】：

听起来您只是遇到了white-space 的默认行为。您可以查看 CSS white-space 属性并尝试类似 pre 的内容。

【讨论】：

我刚刚尝试过，但它不起作用，因为使用 pre（或类似属性）句子不会中断并且表格的宽度会增长很多

【解决方案4】：

我面临同样的问题，我认为最好的解决方案是将每个单词用white-space: nowrap; 包装在一个跨度中。这样可以确保单词内部不会有任何换行符。

请参阅此 JSFiddle 以获得概念证明：http://jsfiddle.net/we7jx08r/。当你改变 body 的宽度时，你会注意到换行符总是正确的。

请参阅http://css-tricks.com/almanac/properties/w/whitespace/ 了解white-space: nowrap 浏览器支持（IE5.5+、FF1+、Safari 1+）。

【讨论】：

【解决方案5】：

您可以尝试我不久前研究的解决方案：https://stackoverflow.com/a/46714474/2114953

也就是说，如果您喜欢使用 JS 将每个单词包装成 span HTML 元素，然后使用 CSS display: inline-block 强制单词在需要时换行。

【讨论】：

【解决方案6】：

我一直在寻找我正在从事的项目。我认为https://www.w3.org/TR/css-text-3/#line-breaking 涵盖了这一点，尤其是“示例 5”：

再举一个例子，韩语有两种换行方式：在任意两个韩语音节之间（分词：正常），或者像英语一样，主要在空格处（分词：keep-all）。

确实，谷歌浏览器（版本 61）的默认行为是在音节上打断（我假设我不会说或读韩语）

设置 word-break: all，似乎会覆盖此行为并仅在空白处放置换行符。

【讨论】：

【解决方案7】：

word-break: keep-all; 为我修复了它。如果用户专门查看韩语网站，我添加了这个。

word-break: keep-all; -> "中文/日文/韩文 (CJK) 文本不应使用分词符。非 CJK 文本行为与值 'normal' 相同" (https://www.w3schools.com/cssref/css3_pr_word-break.asp)

【讨论】：