在Chrome中错误的断言?但在IE中正确显示！！在HTML代码中使用中文单词时

Question

My css：

   .testBox {
        width: 100px;
        height: 200px;
        border: 1px solid;
        word-wrap: break-word;
        word-break: normal;
    }

我的网页：

<div class="testBox">
    <p>中新网北京1月4日电(记者 俞岚 周锐)中国对3.53亿元<span>人</span><span>民</span><span>币</span><span>。</span>这也是迄今为止中国开出的金额最高的一张价格违法罚单</p>
</div>
<div class="testBox">
    <p>中新网北京1月4日电(记者 俞岚 周锐)中国对3.53亿元人民币。这也是迄今为止中国开出的金额最高的一张价格违法罚单</p>
</div>
<div class="testBox">
    <p>123456789<span>a</span><span>b</span><span>c</span><span>d</span>efghigkilmnopqrstuvwxz</p>
</div>
<div class="testBox">
    <p>123456789abcdefghigkilmnopqrstuvwxz</p>
</div>

请注意"亿"！之后，Chrome 中有一个断语，但在 IE 中没有

我做了一些"跨度"来包装角色.....为什么？？？如何编写以获得相同的效果

Answer 1

在 CSS 文档中：

word-break 属性指定非 CJK 脚本的换行规则。

提示：中日韩脚本包括中文、日文和韩文（"中日韩"）文字。

所以，我想它不适用于 CJK 脚本...

Answer 2

使用

word-break: break-all;

根据 CSS3 文本草稿，这样的设置允许在任意两个字母之间换行。它补充说："此选项主要用于文本主要使用 CJK 字符且很少有非 CJK 摘录的上下文，并且希望文本更好地分布在每一行上。

值normal意味着"单词根据其通常的规则中断"，这些规则或多或少取决于浏览器。