测试文本环绕图片效果时碰到的一个问题

/*-------------------------
本文为个人的学习笔记，仅供参考
-------------------------*/

在通过浮动float:left测试文字环绕图片的效果的时候，发现了一个有意思的问题：

HTML：

<div class="myDiv">
    <img src=""/> /*路径省略了*/
    <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
</div>

CSS：

.myDiv{
    width: 200px;
    height: 200px;
    background-color: gray;
}
.myDiv img{
    width: 100px;
    float: left;
    margin: 0 10 10 0;
}

效果：

环绕失败

这和预想的不一样吧！预想中的效果是文本环绕着图片，且到容器边缘后会自动换行，现在文本不仅没有环绕，还直接跑到了图片的下方，甚至超出了容器.....当尝试把英文字母改成数字后，情况依旧，只有改为中文后，才达到了想要的效果：

HTML：

<div class="myDiv">
    <img src=""/>
    <p>文字环绕的效果文字环绕的效果文字环绕的效果文字环绕的效果文字环绕的效果文字环绕的效果文字环绕的效果</p>
</div>

效果：

环绕成功

这是什么原因？明明HTML结构和CSS样式前后都一致，差别只在文本内容本身而已。为什么英文字母和数字就不会自动换行呢？我猜测应该是浏览器对中英字符的处理规则不同，英文字符只要中间不出现空格，浏览器就认为它是一个完整的单词。后来查了一下，发现果然如此。那么回过头来看，上面失败的情况中的那一长条的aaaaaaaaaaaaa...，其实在浏览器看来相当于一个单词，相当于一个中文汉字，在尝试将这“一个汉字”放到图片右侧进行环绕时，发现容器宽度不够，只能往下面放了，哪怕放下面依然会超出 ╮（╯＿╰）╭

大概知道了原因，那现在如果我一定要让一长串英文字母环绕图片该怎么处理呢？其实超简单，强行换行就行了：

CSS：

p{
    word-wrap: break-word;
}

效果：

环绕成功