现象

在html页面中，有一个限制了宽度的div，在div中分别写入中文文字和英文字母以及数字，可以看到两种不同现象。

1. 中文内容的div

<div style="width:100px;border:1px solid;">这是一大段中文，发现中文竟然可以自动换行</div>

显示如下：

2. 英文和数字内容的div

<div style="width:100px;border:1px solid;">aaaaaaaaaa123213123098098asdfddddddddddd</div>

显示如下：

发现

在指定了宽度的div中，对于中文内容，浏览器会自动换行以适应宽度。对于英文及数字，则不会自动换行。

针对英文和数字的解决方案

使用css，显示地控制内容根据div宽度自动换行。

div{
  width: 200px;
  word-wrap: break-word;
}

为什么会这样

word-wrap是css3属性。可用的值有normal | break-word;

normal: 只在允许的断子点换行（浏览器保持默认处理）
break-word: 在长单词或URL地址内部进行换行

可见浏览器对限制宽度div的内容换行，是根据默认的断字点进行的，中文的断字点估计一个文字就是一个点，对于英文，如果是一连串的字符，浏览器可能认为这是一个长单词，所以不予换行。 所以就导致了上述的现象，而在实际应用中，我们是不大可能写一堆连续不断的无意义字符串的，英文单词也会以空格隔开，这样，浏览器依然可以对英文和数字内容换行。
如下代码，不加word-wrap样式，正常的英文内容依然可以自动换行

<div style="width:100px;border:1px solid">hello world! look, the browser word-wrap .</div>