时间戳

首页 > 解决方案 > 为什么在使用 U+3002 和 `word-break: keep-all` 时 Firefox 和 Chrome 的行为会有所不同？

html - 为什么在使用 U+3002 和 `word-break: keep-all` 时 Firefox 和 Chrome 的行为会有所不同？

问题描述

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

中文/日文/韩文 (CJK) 文本不应使用分词符。非 CJK 文本行为与正常情况相同。

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

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

标签： htmlcssgoogle-chromefirefox

解决方案

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

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

推荐阅读