<pre>标签

Posted 2020-09-25 gccbuaa

 <pre>标签最主要的认识就是预格式化文本，被包围在 pre 元素中的文本一般会保留空格和换行符。而文本也会呈现为等宽字体。经经常使用于在网页中显示计算机源码。

1、格式化文本举例

<pre>
.post_code
{
 padding:10px;
 border:dotted 1px #0000ff;
 width:650px;
 height:auto;
 overflow:scroll;
}
</pre>
<div>
.post_code
{
 padding:10px;
 border:dotted 1px #0000ff;
 width:650px;
 height:auto;
 overflow:scroll;
}
</div>

显示结果：

2、<pre>和<code>的差别

code标签：

      1、code标签的定义: <code>标签， 用于表示计算机源码或者其它机器能够阅读的文本内容。

软件代码的编写 者习惯了编写代码时的代码格式，那么这个<code>标签就是为软件代码编写者设计的。 code标签内的文本将用等宽、类似电传打字机样式的字体（Courier）显示出来。

      2、code标签的应用。应该是仅仅用在表示计算机程序源码或者其它机器能够阅读的文本内容上。

<code> 标签的功能有：将文本变成等宽字体；另一个功能就是暗示这段文本是源程序代码。

那么依据第二个功能。将来浏览器可能会依据自己的实际情况加入效果。

比如，程序猿的浏览器可能会寻找 <code> 片段，并运行某 些额外的文本格式化处理，如循环和条件推断语句的特殊缩进等。

      3、code标签的演示样例，我们能够看看以下不加code标签的文本片段和加上code标签的文本片段之间的格式上的差别。须要注意的是，这里仅仅是演示了code标签的第一个功能，至于暗示浏览器这段代码时源程序的功能。须要在详细的浏览器上才干显示。

      4、code标签和pre标签之间的关系。通过定义我们能够知道code标签和pre标签之间的关系，两者的共同点是应用上类似。都主要应用于浏览器显示计算机中的源码。 可是两者之间还是有非常大不同的，code标签的一个功能是暗示浏览器code标签所包围的文本是计算机源码。浏览器能够做出自己的 样式处理，pre标签则没有这项功能，可是pre标签能够保留文本中的空格和换行符。保留文本中的空格和换行符是计算机源码显示 所必须的样式。那么这个时候我们能够想象一下，code标签和pre标签可不能够一块使用呢？答案是能够的，code标签和pre标签是 能够嵌套使用的，可是必须注意两者的嵌套顺序。

http://www.cnblogs.com/lizonghui/archive/2012/09/18/2692355.html

3、<pre>标签中文本实现换行

被包围在pre元素中的文本一般会保留空格和换行符，但不幸的是，当你在<pre>标签里面写代码的时候，假设你没有手动换行，它也会给你保留，而不会动换行。

我们都知道<pre>标签可定义预格式化的文本，一个常见应用就是用来表示计算机的源码。被包围在pre元素中的文本一般会保留空格和换行符，但不幸的是。当你在<pre>标签里面写代码的时候，假设你没有手动换行，它也会给你保留，而不会动换行。

这时候，你能够使用overflow:auto;(当代码超出容器边界的时候，显示滚动框)，但这种方法也并不适用于全部主流浏览器，一些浏览器会直接截断超出的内容。

因为本站中使用源代码的地方也不是非常多，之前也不是非常在意这个问题。前不久有位热心的网友在QQ上反馈这个问题，于是在趁这次更换主题时，寻找了一下解决方式。分享之。

pre{
　　white-space:pre-wrap;/*css-3*/
　　white-space:-moz-pre-wrap;/*Mozilla,since1999*/
　　white-space:-pre-wrap;/*Opera4-6*/
　　white-space:-o-pre-wrap;/*Opera7*/
　　word-wrap:break-word;/*InternetExplorer5.5+*/
}

该CSS方案可让pre标签内的文本自己主动换行，我在我有的浏览器上都測试了一下，所有支持，IE6，IE7,IE8,Firefox,Opera,Safari和Chrome。

仅当你把窗体缩小到小于20个字符的宽度的时候。才会超出边界。