pre {
white-space: pre; / CSS 2.0 /
white-space: pre-wrap; / CSS 2.1 /
white-space: pre-line; / CSS 3.0 /
white-space: -pre-wrap; / Opera 4-6 /
white-space: -o-pre-wrap; / Opera 7 /
white-space: -moz-pre-wrap; / Mozilla /
white-space: -hp-pre-wrap; / HP Printers /
word-wrap: break-word; / IE 5+ /
}
white-space - 空格内元素的显示方式
- 取值: normal | pre | nowrap | pre-wrap | pre-line | inherit
- normal: 正常无变化(默认处理方式.文本自动处理换行.假如抵达容器边界内容会转到下一行)
- pre: 保持HTML源代码的空格与换行,等同于pre标签
- nowrap: 强制文本在一行,除非遇到br换行标签
- pre-wrap: 同pre属性,但是遇到超出容器范围的时候会自动换行
- pre-line: 同pre属性,但是遇到连续空格会被看作一个空格
- inherit: 继承
平时的时候,简单化只要用 pre-line就可以了~
这有个实例,可以看下
http://perishablepress.com/press/wp-content/online/demos/css-wrap-demo.html