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

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

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

这时候就想到了使用

元素。

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

但问题又来了，使用

 元素，固然保留了原内容中的换行符，但页面中没有实现了自动换行，导致每行的长度过长，影响阅读。
 
  
并且，从H4开始
中可以定义每行最大字符数的“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>
 
  
这样，
里的内容就可以自动换行了。