【HTML】实现 pre 标签内容超出自动换行

文章目录

• 示例：

<pre>
一串很长的文本，一串很长的文本，一串很长的文本，一串很长的文本，一串很长的文本，一串很长的文本，一串很长的文本，一串很长的文本，一串很长的文本，一串很长的文本，一串很长的文本，一串很长的文本，一串很长的文本，一串很长的文本，一串很长的文本，一串很长的文本，一串很长的文本，一串很长的文本，一串很长的文本，一串很长的文本，一串很长的文本，一串很长的文本，一串很长的文本，一串很长的文本，一串很长的文本，一串很长的文本，一串很长的文本，一串很长的文本，一串很长的文本，一串很长的文本，一串很长的文本，一串很长的文本，一串很长的文本，一串很长的文本，一串很长的文本。
</pre>

• 设置css超出换行属性：

pre {
    white-space: pre-wrap;
}

• white-space 解析：

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