css上的一个小问题，不知是否和html标签有关？

Question

很简单的一段代码，但却没有我想象中想要的结果

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

请问这神奇的现象是怎么来的？

Answer 1

做一个类比, 你的 span 里面只有一个中文汉字, 这个宽20px, 而你的 span 只有10px 宽, 这个文字会被分成两半换行显示吗?

浏览器有自己的分词策略, 对中文来说, 单个汉字永远是不可分割的, 对英文和数字来说, 浏览器会使用一定的策略, 把一连串的字符, 比如 ccccccccc 看成了一个不可分割的 word. 你可以通过 word-break: break-word; 来指示浏览器在容器边界把 word 分开. 除此之外还有一个标签 <wbr> 可以指示浏览器 word 的边界.

<span>
cccccccccccccc<wbr>cccccccccccccccccccccccccccccccccccccc
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</span>

Answer 2

没仔细审题， 汉字和字母浏览器换行机制是不一样。。。 编辑了~~~

Answer 3

如楼上所说，浏览器自身机制（分词策略）

Answer 4

用white-space: nowrap;文本才不会换行，文本会在在同一行上继续，直到遇到
标签为止。