鍍金池/ 問答/HTML/ css上的一個小問題，不知是否和html標簽有關(guān)？

css上的一個小問題，不知是否和html標簽有關(guān)？

很簡單的一段代碼，但卻沒有我想象中想要的結(jié)果

    <style>
        *{
            margin: 0;
            padding: 0            
        }
        p {
            width: 200px;
            height：200px;
            background:skyblue;
            white-space: normal;
        }
        span{
            
        }
    </style>
  ------------------------  
    <p>
        <span>cccccccccccccccccccccccccccccccccccccccccccccccccccc
              aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
        </span>
    </p>

clipboard.png

請問這神奇的現(xiàn)象是怎么來的？

回答
編輯回答
墻頭草

clipboard.png
如樓上所說，瀏覽器自身機制（分詞策略）

2018年6月11日 23:56
編輯回答
陌如玉

做一個類比, 你的 span 里面只有一個中文漢字, 這個寬20px, 而你的 span 只有10px 寬, 這個文字會被分成兩半換行顯示嗎?

瀏覽器有自己的分詞策略, 對中文來說, 單個漢字永遠是不可分割的, 對英文和數(shù)字來說, 瀏覽器會使用一定的策略, 把一連串的字符, 比如 ccccccccc 看成了一個不可分割的 word. 你可以通過 word-break: break-word; 來指示瀏覽器在容器邊界把 word 分開. 除此之外還有一個標簽 <wbr> 可以指示瀏覽器 word 的邊界.

<span>
cccccccccccccc<wbr>cccccccccccccccccccccccccccccccccccccc
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</span>
2018年7月17日 09:53
編輯回答
久礙你

沒仔細審題， 漢字和字母瀏覽器換行機制是不一樣。。。 編輯了~~~

2017年3月6日 11:26
編輯回答
久不遇

用white-space: nowrap;文本才不會換行，文本會在在同一行上繼續(xù)，直到遇到
標簽為止。

2017年4月11日 01:33