使用word-wrap来防止文字溢出

在Web开发中，我们经常会遇到一些看似简单但实际上却棘手的问题。比如，在DIV元素中限制了宽度，但连续的字母输入却不自动换行，这个问题可能会让人头疼不已。对于这种情况，有些开发者可能会感到困惑：明明设置了宽度限制，为何内容还是溢出边界？

其实，这个问题的关键在于连续的字母被当作一个单词处理。在某些浏览器中，长单词在达到边界时不会自动换行，而是继续延伸超出设定的宽度。对于外国人来说，他们更倾向于保持一个单词的完整性，不愿意将其切开来看。我们需要采取一些特定的CSS样式来解决这个问题。

我们可以尝试使用 `word-break: break-all` 和 `word-wrap: break-word` 这两个属性来解决长字符串换行问题。在实际测试中我们发现，不同的浏览器对于这些属性的处理方式并不完全相同。

`word-break: break-all` 会在所有字符处强制换行，不论其是否为一个完整的单词。在IE6/7、Chrome和Safari中，表现为尾部截断；而在Firefox 3.0和Opera中，这一属性似乎无效，即长单词会换行显示，然后溢出边界。

另一方面，`word-wrap: break-word` 会在必要时打断单词以实现换行。在IE6/7、Chrome和Safari中，它会首先尝试在长单词处换行；如果无法做到，才会进行裁切。在Firefox 3.0和Opera中，这一属性同样表现为无效。

显然，`word-wrap: break-word` 更符合用户的体验需求。对于不支持此属性的老版本浏览器（如Firefox 3.0和Opera），我们可以使用 `overflow-x: hidden` 属性来隐藏溢出的内容。值得注意的是，Firefox 3.5及以上版本已经支持 `overflow-x` 属性。

针对这个问题，我们的建议是：使用 `word-wrap: break-word; overflow-x: hidden; width: 500px;` 这组CSS样式来解决长单词换行和溢出问题。这样既能保证内容的正常显示，又能提升用户体验。对于特定的浏览器版本，我们还需要进行适当的兼容性处理。