如何使网页布局中输入连续字符强制换行
在网页设计中，一般情况下我们会对一些内容定义固定宽度，然后通过程序输出诸如网友评论之类的内容。这个时候如果网友在提交评论时输入的内容是一连串叹号或省略号的话，即使是你固定了总宽度，还是不能让这些连续的字符自动换行。本文就分享下使网页布局中输入连续字符强制换行的解决方案。
先来看看通过普通的css定义所输出的示例图片：
一般固定宽度的网页排版效果
通过图片我们可以看到当DIV中的内容如果是重复的字符的话，即使你定死了宽度，这些字符还是会跑到外面去。造成这样显示的原因是浏览器把这些连续的字符当成了类似于一个英文单词对待了，所以会超出所定义宽度的显示范围。
上图示例所使用的HTML代码如下：
1 2 | <div class="box1"> 园子博客是一个关注互联网和WordPress的IT博客。这里分享的内容有：Wordpress 使用技巧与插件介绍，网站优化与推广，web标准的学习与应用，Google Adsense优化技巧，CSS、XHTML在网页中的应用以及一些非常酷的软件等等。 </div> <div class="box1"> 园子博客是一个关注互联网和WordPress的IT博客。！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！</div> |
CSS 样式如下：
1 2 3 4 5 6 7 | .box1 { font-size: 12px; width: 400px; padding: 10px; border: 1px solid #CCC; margin-bottom: 10px; } |
网页布局中输入连续字符强制换行的方法
方法也很简单，使用 CSS 的 word-wrap:break-word; 属性即可。你只需要在CSS样式中加入如下代码：
1 | word-wrap:break-word; |
通过这个属性可以定义文档依照亚洲语言和非亚洲语言的文本规则，允许在字内换行，且允许非亚洲语言文本行的任意字内断开。
通过使用此样式定义后文档显示效果如下：
使用了 word-wrap 属性后的排版显示效果
此时完整的CSS样式如下：
1 2 3 4 5 6 7 8 | .box1 { font-size: 12px; width: 400px; padding: 10px; border: 1px solid #CCC; margin-bottom: 10px; word-wrap:break-word; } |
其实我们在设计中经常会遇到这种情况，比如在设计网友评论的时候，一般情况下都是固定宽度的，而我们不可能通过复杂的程序来控制用户输入什么字符。在这个时候记得通过 CSS 的 word-wrap 属性来控制网页布局中输入连续字符强制换行。
