HTML <pre> 标签有什么作用？
<pre> 元素可定义预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。<pre> 标签的一个常见应用就是用来表示计算机的源代码。
如何使使pre标签中的内容自动换行？
我们经常碰到的一个问题是如果一个代码上碰到有图片或者网页地址就会使代码很长，结果会造成页面撑开或者代码超出边界。非常难受，如果用overflow:hidden那么会将原来的代码隐藏掉，用overflow:auto则会出现滚动条，代码也不方便阅读。
那么如何解决<pre>的内容自动换行的问题？方法如下:
1.先尝试使用：word-wrap: break-word;将内容自动换行，ie，op，chrome，safari都可以，firefox不行。
2. html pre标签的浏览器默认样式：
xmp, pre, plaintext {
display: block;
font-family: -moz-fixed;
white-space: pre;
margin: 1em 0;
}
都有这个white-space: pre，看看white-space的值：
值 描述
normal 默认。空白会被浏览器忽略。
pre 空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。
nowrap 文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。
pre-wrap 保留空白符序列，但是正常地进行换行。
pre-line 合并空白符序列，但是保留换行符。
inherit 规定应该从父元素继承 white-space 属性的值。
有个pre-wrap，保留空白符序列，但是正常地进行换行。
我们只要加上样式：
pre {
white-space: pre-wrap;
word-wrap: break-word;
}
就能使<pre>的内容自动换行，这样就解决了<pre>的内容自动换行的问题。
<pre> 元素实例（www.169it.com）
预格式化的文本:
<pre>
此例演示如何使用 pre 标签
对空行和 空格
进行控制
</pre>
浏览器支持
目前大多数浏览器支持 <pre> 标签。
标签定义及使用说明
<pre> 标签可定义预格式化的文本。
被包围在 <pre> 标签 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。
提示: <pre> 标签的一个常见应用就是用来表示计算机的源代码。
在HTML 4.01 与 HTML5中的差异
在 HTML 4.01 中，"width" 属性已废弃，不可使用。 HTML5 不支持"width"属性。
属性
| 属性 | 值 | 描述 |
|---|
| width | number | HTML5 不支持该属性。HTML 4.01 已废弃该属性。 定义每行的最大字符数（通常是 40、80 或 132）。 |
<pre> 标签支持全局属性，查看完整属性表 HTML全局属性。
<pre> 标签支持所有 HTML事件属性。
code标签和pre标签的作用,定义与区别
code标签：
2、code标签的应用，应该是只用在表示计算机程序源代码或者其他机器可以阅读的文本内容上。<code> 标签的功能有：将文本变成等宽字体；还有一个功能就是暗示这段文本是源程序代码。那么根据第二个功能，将来浏览器可能会根据自己的实际情况添加效果。例如，程序员的浏览器可能会寻找 <code> 片段，并执行某 些额外的文本格式化处理，如循环和条件判断语句的特殊缩进等。
pre标签：
2、pre标签的功能，pre标签一个常见的应用便是用来保存计算机中的源代码的文本。但是，需要注意的是， 可以导致段落断开的标签（例如标题、<p> 和 <address> 标签）绝不能包含在 <pre> 所定义的块里。 pre标签允许的文本可以包括物理样式和基于内容的样式变化，还有链接、图像和水平分隔线。 当把其他标签（比如 <a> 标签）放到 <pre> 块中时，就像放在 HTML/XHTML 文档的其他部分中一样即可。
code标签和pre标签的关系
通过定义我们可以知道code标签和pre标签之间的关系，两者的共同点是应用上类似，都主要应用于浏览器显示计算机中的源代码。 但是两者之间还是有很大不同的，code标签的一个功能是暗示浏览器code标签所包围的文本是计算机源代码，浏览器可以做出自己的 样式处理，pre标签则没有这项功能，但是pre标签可以保留文本中的空格和换行符，保留文本中的空格和换行符是计算机源代码显示 所必须的样式。那么这个时候我们可以想象一下，code标签和pre标签可不可以一块使用呢？答案是可以的，code标签和pre标签是 可以嵌套使用的，但是必须注意两者的嵌套顺序。
-
本站(WWW.)旨在分享和传播互联网科技相关的资讯和技术，将尽最大努力为读者提供更好的信息聚合和浏览方式。
本站(WWW.)站内文章除注明原创外，均为转载,整理或搜集自网络.欢迎任何形式的转载，转载请注明出处.
转载请注明：文章转载自:[169IT-IT技术资讯]
本文标题:HTML <pre> 标签
