有时我们希望保留文本中的空格和换行符之类的，比如展示计算机的源代码的时候，就会用到 <pre>，而 <pre> 的 white-space 属性的值就是 pre，
复制代码 代码如下:
pre {
white-space: pre;
}
pre 也不那么尽如人意，遇到边界的时候不会自动换行，所以 CSS 2.1 新增了 pre-wrap，
复制代码 代码如下:
pre {
white-space: pre;
white-space: pre-wrap;
}
这样 pre 元素里的内容既能保持原有的格式，又能在内容超出边界的时候自动换行。
由于不是所有浏览器都支持 pre-wrap，所以还需要让那些不支持浏览器强制换行，
复制代码 代码如下:
pre {
white-space: pre;
white-space: pre-wrap;
word-wrap: break-word;
}
当然，也许你并不希望换行，也不介意水平滚动条，那可以用水平滚动条来代替换行，
复制代码 代码如下:
pre {
overflow: auto;
}
7.word-break
目前 webkit 大家族（包括 Google Chrome，Safari，Android Browser 等等）均不支持 keep-all 值，所以能用的也就 break-all 了，
复制代码 代码如下:
word-break: break-all;
不过会造成英文文本阅读障碍，应该慎用，
8.word-wrap
这是比 word-break 更好的实现文本换行的方式，
复制代码 代码如下:
word-wrap: break-word;
再添加一个溢出隐藏，避免一些恶意的连续字符，
复制代码 代码如下:
overflow: hidden;
您可能感兴趣的文章: