<pre>标签中的内容如何自动换行？

<pre>标签中的内容如何自动换行？pre标签，pre标签自动换行，pre自动换行

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

<pre> 标签的一个常见应用就是用来表示计算机的源代码。

然而我们在使用的过程中肯定碰到过这样的问题：如果同一行的代码特别长的话（比如包含了很长的url链接）就会出现把页面撑开超出边界，看着非常不舒服，如果用overflow:hidden那么会将原来的代码隐藏掉，用overflow:auto则会出现滚动条，代码也不方便阅读。

那么如何解决这个问题呢？下面给大家分享一下解决方法：

出现以上的问题是因为我们对<pre>标签没有理解，仅使用了<pre>标签在浏览器中的默认样式：

xmp, pre, plaintext {
 display: block;
 font-family: -moz-fixed;
 white-space: pre;
 margin: 1em 0;
}

注意white-space：这个样式，他有多个属性值

值	描述
normal	默认。空白会被浏览器忽略。
pre	空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。
nowrap	文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。
pre-wrap	保留空白符序列，但是正常地进行换行。
pre-line	合并空白符序列，但是保留换行符。
inherit	规定应该从父元素继承 white-space 属性的值。

其中有个pre-wrap，指的是保留空白符序列，并正常地进行换行。所以，我们就可以通过该样式的属性值结合word-wrap:样式实现<pre>标签的自动换行：

pre {
white-space: pre-wrap;
word-wrap: break-word;
}

解决问题

IT技术资料分享-个人整理自互联网 https://www.lmdouble.com/1747572698.html