2

我在这里遇到了一个问题：我有一个韩文十进制 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 代码，您可以看出 ;면 가 之间有一个空格，但它会在任何地方中断，所有文本都一样。

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

编辑

这是一个工作示例。

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

4

7 回答 7

5

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

以与语言无关的方式，您无能为力。CSS 级别 3 定义了相关属性(line-break和word-break)，但我不太确定现代浏览器的支持级别是什么（显然不太现代的浏览器完全不适用）。

于 2013-01-22T14:47:34.607 回答
3

这并不重要，因为韩语无论如何都可以在任何地方分裂。请参阅 Chosun.com 的此屏幕截图：

在此处输入图像描述

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

于 2013-01-22T14:23:09.047 回答
0

听起来您只是遇到了white-space. 您可以查看 CSSwhite-space属性并尝试类似pre.

于 2013-01-22T12:36:52.553 回答
0

我面临同样的问题，我认为最好的解决方案是用white-space: nowrap;. 这样可以确保单词内部没有任何换行符。

有关概念证明，请参阅此 JSFiddle：http: //jsfiddle.net/we7jx08r/。当您更改正文的宽度时，您会注意到换行符始终是正确的。

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

于 2014-08-29T10:09:56.300 回答
0

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

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

于 2017-10-12T16:22:25.183 回答
0

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

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

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

设置 word-break: all 似乎会覆盖此行为并将换行符仅放在空格上。

于 2017-11-15T15:30:47.360 回答
0

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

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

于 2018-07-13T18:38:43.467 回答