html - 为什么 Firefox 和 Chrome 在将 U+3002 与 `word-break: keep-all` 一起使用时表现不同？

Question

我在 textarea 中使用日语输入了以下句子。

* {
  margin: 0;
  padding: 0;
}

textarea {
  width: 5em;
  height: 10em;
  word-break: keep-all;
}

<textarea>あいうえお。かきくけこ</textarea>

Firefox中就是这样一张图片，U+3002(.)后面紧跟着一句。

然而，在 Chrome 中，在 U+3002 (.) 之后立即换行。

根据MDN , keep-all 不允许 CJK 文本中断。

keep-all

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

所以我认为 Chrome 的工作方式与规范不同。如何让 Chrome 的文本中断像 Firefox 一样工作？

---

操作系统和浏览器详细信息

• Windows 10
• Firefox 开发者版 67.0b1
• 谷歌浏览器 72.0.3626.121

Answer 1

Chrome 中发生的事情是 <textarea> 有一个特殊的 overflow-wrap 值，它被设置为 break-word。这意味着当您在此添加自己的 word-break: keep-all 时，这两个值将发生冲突。

Chrome 似乎首先遵守 word-break 规则，而 Firefox 忽略它，如下所示:

* {
  margin: 0;
  padding: 0;
}

textarea {
  width: 5em;
  height: 10em;
  word-break: keep-all;
  overflow-wrap: normal;
}

<textarea>あいうえお。かきくけこ</textarea>

然后 Chrome 对此结果应用 overflow-wrap，这确实使你的句子重复中断。

所以这里真正奇怪的是，为什么 Chrome 拒绝在 之前 任何点字符，即使使用 word-break: break-all...

* {
  margin: 0;
  padding: 0;
}

textarea {
  width: 1em;
  height: 46em;
  word-break: break-all;
}

<textarea>あいうえお。かきくけこ푸바.밫foobar.baz..............</textarea>

而且，不仅在 <textarea> 中

* {
  margin: 0;
  padding: 0;
}

.test {
  width: 1em;
  height: 46em;
  word-break: break-all;
  border: 1px solid;
}

<div class="test">あいうえお。かきくけこ푸바.밫foobar.baz..............</div>

不幸的是，我没有找到规避这种行为的方法......