word-wrap

平时的网页制作中碰到过这样的情况，比如说在blog中制作了一个完美而且又靓丽的评论布局，让你的用户浏览网页是可以给你添加评论，但当有人发布了一个原始网址或者其它超长的文本时，你此时的布局就被他们给彻底的破坏了，为了解决这样的问题你平时可能是这样来处理的：

1、在你评论的box中增加了一个"overflow-x:auto",当内容超过容器时，在容器底部实现一个水平的scrollbar;

2、你或许会使用"overflow:hidden"直接隐藏所超出的文本，来达到你的布局完美；

3、你可能会使用js来控制；

虽然以上的方法都可以实现，达到不撑破容器，从而不破坏网页布局，但是css3中有更好的办法，那就是word-wrap。

word-wrap语法：

word-wrap:normal | break-word;

 normal就是字体太多时就会撑div跑到外面去。

break-word让字体在边框边界时自动换行，不会跑到div外面。（需注意的是它不会截断英文字词，这样在边界上的英文也会跑出DIV）。

word-wrap:break-word只能在内容中换行，而不能实现词内换行，前面提到过如果需要词内换行，我们需要使用word-break属性。

word-break语法：

word-break:normal | break-all | keep-all;

normal:如果设置为默认值时中文则到边界处的汉字换行，如果是英文整个单词换行，如果出现某个单词长度过长，则会撑破容器，如果边框为固定属性，则后面部分将无法显示；

break-all:强行截断英文字词，达到换行目的；

keep-all:

不允许字断开。如果是中文将把前后标点符号内的一个汉字短语整个换行，英文单词也整个换行，如果出现某个英文字符长度超过边界，则后面的部分将撑破容器，如果边框为固定属性，则后面部分无法显示.

 

转载于:https://www.cnblogs.com/well-nice/p/3622662.html