CODEWITHSUNDEEP
htmlcssinternet-explorergoogle-chromeline-breaks
xiaomo
xiaomo

Reputation: 31

Wrong break-word in Chrome?but right show in IE!! when using Chinese word in HTML code

My css:

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

My HTML:

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

Please pay attention for “亿”！after that , there is a break-word in Chrome,but not in IE When

I've made some "span" wrapping the character.....why??? how to write to get the same effect

Upvotes: 0

Views: 872

Answers (2)

Jukka K. Korpela
Jukka K. Korpela

Reputation: 201568

Use

word-break: break-all;

According to the CSS3 Text draft, such a setting allows a line break between any two letters. It adds: “This option is used mostly in a context where the text is predominantly using CJK characters with few non-CJK excerpts and it is desired that the text be better distributed on each line.”

The value normal means that “words break according to their usual rules”, which are more or less browser-dependent.

Upvotes: 0

Praveen Kumar Purushothaman
Praveen Kumar Purushothaman

Reputation: 167172

In the CSS documentation:

The word-break property specifies line breaking rules for non-CJK scripts.

Tip: CJK scripts are Chinese, Japanese and Korean ("CJK") scripts.

So, I guess it doesn't work for CJK Scripts...

Upvotes: 1

Related Questions