<pre>标签的一个常见应用就是用来表示计算机的源代码。
可以导致段落断开的标签(例如标题、<p>和 <address>标签)绝不能包含在 <pre>所定义的块里。尽管有些浏览器会把段落结束标签解释为简单地换行,但是这种行为在所有浏览器上并不都是一样的。
pre 元素中允许的文本可以包括物理样式和基于内容的样式变化,还有链接、图像和水平分隔线。当把其他标签(比如 <a>标签)放到 <pre>块中时,就像放在 HTML/XHTML 文档的其他部分中一样即可。
white-space,控制空白字符的显示,同时还能控制是否自动换行。它有五个值:normal | nowrap | pre | pre-wrap | pre-line
word-break,控制单词如何被拆分换行。它有三个值:normal | break-all | keep-all
word-wrap(overflow-wrap)控制长度超过一行的单词是否被拆分换行,是word-break的补充,它有两个值:normal | break-word
white-space
先看下white-space:nowrap时的情况:
不仅空格被合并,换行符无效,连原本的自动换行都没了!只有</br>才能导致换行!所以这个值的表现还是挺简单的,我们可以理解为永不换行。
white-space:pre:
空格和换行符全都被保留了下来!不过自动换行还是没了。保留,所以pre其实是preserve的缩写,这样就好记了。
white-space:pre-wrap:
显然pre-wrap就是preserve+wrap,保留空格和换行符,且可以自动换行。
white-space:pre-line:
空格被合并了,但是换行符可以发挥作用,line应该是new line的意思,自动换行还在,所以pre-line其实是preserve+new line+wrap。