HTML5文本 描述性信息 预定义格式

预定义文本就是可以保持文本固有的换行和空格。使用pre元素可以定义预定义文本。

■实例设计

下面使用pre显示CSS样式代码，显示效果如图所示。

<pre> 

pre {

    margin: 20px auto; 

    padding: 20px;

    background-color: #aea8a8; /*根据自己需要修改背景底色颜色*/

    white-space: pre-wrap; 

    word-wrap: break-word; 

    letter-spacing: 0; 

    font: 14px/26px 'courier new'; 

    position: relative; 

    border-radius: 4px;

}

</pre>

    预定义文本默认以等宽字体显示，可以使用CSS改变字体样式。如果要显示包含HTML元素的内容，应将包围元素名称的“<”和“>”分别改为其对应的字符实体&lt;和&gt;。

    ■小结

    pre默认为块显示，即从新一行开始显示，浏览器通常会对pre文本关闭自动换行，因此，如果包含很长的单词，就会影响页面的布局或产生横向滚动条。使用下面CSS样式可以对pre包含内容打开自动换行。

    pre {white-space: pre-wrap;}