如何使<pre>元素里的内容自动换行

pre 元素可定义预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。

今天遇到了一个棘手的问题，当从数据据库中取出数据，放在jsp页面显示时，发现内容都堆积在了一块，没有换行，看着很难受。但是在控制台输出，换行却被保留着。

这时候就想到了使用<pre>元素。

pre 元素可定义预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。

但问题又来了，使用<pre> 元素，固然保留了原内容中的换行符，但页面中没有实现了自动换行，导致每行的长度过长，影响阅读。

并且，从H4开始<pre>中可以定义每行最大字符数的“width”属性，就已经不被赞成使用。

可行的解决方法是结合使用CSS。

CSS的white-space属性用于指定如何处理容器中的空白字符。

white-space出自CSS1，适用于块状元素，具有继承性，支持IE 5.5+、Chrome、FireFox、Safari、Opera等所有主流浏览器，其默认值为normal。

我们来看一下white-space可选的属性值：

注意到“pre-wrap”属性值：保留空白符序列，但是正常地进行换行。

找到了！ 使用“pre-wrap”属性值就可以完全满足我们的要求。

对应的CSS规则是：

<style>

    pre{
    white-space:pre-wrap;
    word-wrap:break-word;
    }

</style>

这样，<pre>里的内容就可以自动换行了。