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>里的内容就可以自动换行了。
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/10371.html
