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

中文/日文/韩文（CJK）文字不应使用换行符。非CJK文本行为与常规行为相同。

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

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

Windows 10
Firefox开发人员版67.0b1
Google Chrome 72.0.3626.121

Answer 1

Chrome在此发生的情况是具有一个特殊的<code>overflow-wrap</code>值，该值设置为<code>break-word</code>。这意味着当您在其上添加自己的<code>word-break: keep-all</code>时，这两个值将发生冲突。 </p> <p> Chrome似乎首先遵循<code>word-break</code>规则，而Firefox忽略了它，如以下所示：</p> <p> </p> <div class =“ snippet” data-lang =“ js” data-hide =“ true” data-console =“ true” data-babel =“ false”> <div class =“ snippet-code snippet-currently-hidden”> <pre class="snippet-code-css lang-css prettyprint-override"><code>* { margin: 0; padding: 0; } textarea { width: 5em; height: 10em; word-break: keep-all; overflow-wrap: normal; }</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code><textarea>あいうえお。かきくけこ</textarea></code></pre> </div> </div> <p> </p> <p>然后Chrome将<code>overflow-wrap</code>应用于此结果，这确实使句子加倍了。</p> <p>所以这里真正奇怪的是，为什么Chrome即使在使用<code>word-break: break-all</code>的情况下，也拒绝在<strong>之前</strong>破折号... </p> <p> </p> <div class =“ snippet” data-lang =“ js” data-hide =“ false” data-console =“ true” data-babel =“ false”> <div class =“ snippet-code”> <pre class="snippet-code-css lang-css prettyprint-override"><code>* { margin: 0; padding: 0; } textarea { width: 1em; height: 46em; word-break: break-all; }</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code><textarea>あいうえお。かきくけこ푸바.밫foobar.baz..............</textarea></code></pre> </div> </div> <p> </p> <p>而且，不仅在<textarea> </p> <p> </p> <div class =“ snippet” data-lang =“ js” data-hide =“ true” data-console =“ true” data-babel =“ false”> <div class =“ snippet-code snippet-currently-hidden”> <pre class="snippet-code-css lang-css prettyprint-override"><code>* { margin: 0; padding: 0; } .test { width: 1em; height: 46em; word-break: break-all; border: 1px solid; }</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code><div class="test">あいうえお。かきくけこ푸바.밫foobar.baz..............</div></code></pre> </div> </div> <p> </p> <p>不幸的是，我没有找到规避这种行为的方法... </p> </div> </div> </div> <div class="right"> <div style="height:400px"> <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-6263610230477973" data-ad-slot="2820756182" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> <div style="height:20px"></div> <div class="releated-question-wrapper"> <div class="header"> 相关问题 </div> <div class="hr-line-dashed"></div> <ul> <li> <a href="/q/18078344">溢出滚动 - 为什么WebKit / Blink的行为与Opera / Firefox不同？</a> </li> <li> <a href="/q/22275326">为什么setTimeout（）在Firefox中的行为有所不同</a> </li> <li> <a href="/q/22707167">CSS3 word-break Firefox和Chrome输出不同</a> </li> <li> <a href="/q/23583875">在转换媒体查询和浮动元素时，为什么Chrome的行为会有所不同？</a> </li> <li> <a href="/q/31237248">为什么Firefox在折叠边距方面表现不同？</a> </li> <li> <a href="/q/36002943">为什么Google搜索使用FireFox和Chrome会有不同的表现？</a> </li> <li> <a href="/q/36016805">为什么每个单词定义内部的行为都不同？</a> </li> <li> <a href="/q/47243337">使用word-break：break-word;在Firefox上</a> </li> <li> <a href="/q/55251973">在将U + 3002与“断字：全部保留”结合使用时，为什么Firefox和Chrome的行为会有所不同？</a> </li> <li> <a href="/q/56618668">{over-wrap：break-word`和`word-break：break-word`的行为是否有所不同？</a> </li> </ul> </div> <div class="releated-question-wrapper"> <div class="header"> 最新问题 </div> <div class="hr-line-dashed"></div> <ul> <li> <a href="/q/68614764">我写了这段代码，但我无法理解我的错误</a> </li> <li> <a href="/q/68614678">我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？</a> </li> <li> <a href="/q/68614175">是否有可能使 loadstring 不可能等于打印？卢阿</a> </li> <li> <a href="/q/68614313">java中的random.expovariate()</a> </li> <li> <a href="/q/68614125">Appscript 通过会议在 Google 日历中发送电子邮件和创建活动</a> </li> <li> <a href="/q/68615109">为什么我的 Onclick 箭头功能在 React 中不起作用？</a> </li> <li> <a href="/q/68615123">在此代码中是否有使用“this”的替代方法？</a> </li> <li> <a href="/q/68614097">在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化</a> </li> <li> <a href="/q/68614427">每千个数字得到</a> </li> <li> <a href="/q/68615239">更新了城市边界 KML 文件的来源？</a> </li> </ul> </div> <div class=""> </div> </div> </div> <div> <script> var host = window.location.host; if (host == "www.thinbug.com") { (function () { var bp = document.createElement('script'); var curProtocol = window.location.protocol.split(':')[0]; if (curProtocol === 'https') { bp.src = 'https://zz.bdstatic.com/linksubmit/push.js'; } else { bp.src = 'http://push.zhanzhang.baidu.com/push.js'; } var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(bp, s); })(); } </script> </body> </html>

在将U + 3002与“断字：全部保留”结合使用时，为什么Firefox和Chrome的行为会有所不同？

1 个答案: