<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