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

最新推荐文章于 2024-07-12 23:25:33 发布

一颗不甘坠落的流星

最新推荐文章于 2024-07-12 23:25:33 发布

阅读量1.1k

点赞数 1

分类专栏： HTML 笔记文章标签： html pre

本文链接：https://blog.csdn.net/qq_45677671/article/details/138285331

版权

HTML 笔记专栏收录该内容

19 篇文章 0 订阅

订阅专栏

本文详细解释了CSS中的white-space属性，探讨了normal、nowrap、pre-wrap和pre-line四种模式对文本换行的影响，以及它们在HTML中的应用。

摘要由CSDN通过智能技术生成

文章目录

示例：

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

设置css超出换行属性：

pre {
    white-space: pre-wrap;
}

white-space 解析：

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