0

我的CSS：

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

我的 HTML：

<div class="testBox">
    <p>中新网北京1月4日电(记者 俞岚 周锐)中国对3.53亿元<span>人&lt;/span><span>民&lt;/span><span>币&lt;/span><span>。&lt;/span>这也是迄今为止中国开出的金额最高的一张价格违法罚单&lt;/p>
</div>
<div class="testBox">
    <p>中新网北京1月4日电(记者 俞岚 周锐)中国对3.53亿元人民币。这也是迄今为止中国开出的金额最高的一张价格违法罚单&lt;/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中有break-word，IE中没有

我做了一些“跨度”来包裹角色.....为什么？？？怎么写才能达到同样的效果

4

2 回答 2

1

在CSS 文档中：

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

提示： CJK 脚本是中文、日语和韩语（“CJK”）脚本。

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

于 2013-01-23T10:20:40.900 回答
0

利用

word-break: break-all;

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

该值normal意味着“单词按照通常的规则中断”，这或多或少依赖于浏览器。

于 2013-01-23T11:12:07.877 回答