pre 也可以折行

马黑黑 · 发表于 2023-1-7 11:56

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

本帖最后由马黑黑于 2023-1-7 12:00 编辑

pre 元素用于预格式化文本，它会保留文本的空格和制表符。通常，不做设置的话，pre 内的文本不会自动折行，超出预设宽度之后自动溢出。试看下面的例子：

    第一行（前面是四个空格）
	第二行（前面是Tab制表符） ABCDEFGHIJKLMNOPQRSTUVWXWZ123456789

我们设置一下 pre 标签：

white-space: pre-wrap;

OK，看看效果如果：

    第一行（前面是四个空格）
	第二行（前面是Tab制表符） ABCDEFGHIJKLMNOPQRSTUVWXWZ123456789

效果表明，文本已经自动折行了。折行的方式是默认的 break-word，由于后面的字符串是没有空格的一系列字母和数字，它们整体被视为一个单词。不论如何，pre里的自动折行事实存在，说明自动折行可以设置到 pre 元素之内，核心设置是 white-space: pre-wrap 。

white-space 属性用来设置段落中的文本是否折行，默认值是 normal ，按正常标准自动折行，其值还有 nowrap（不折行）、pre（按html的pre标签标准不折行）、pre-wrap（保留空白符序列，但是正常地进行换行）和 pre-line （合并空白符序列，但是保留换行符），还有一个继承值 inherit ，就是继承父元素的设置值。

html和css学问多多，一点一滴的积累不是问题，不过学习过程中要有探索精神，否则 pre 标签不能折行将成为一个错误的认知。