有时，你想在UI页面中分多行显示以下文字
abc def
ghk lmn
pqr tuv
将在html中使用p 和div 标签对文本进行编码，如下所示
<p>
abc def
ghk lmn
pqr tuv
<p>
浏览器会显示这一行
abc def ghk lmn pqr tuv
我们可以使用br标签在用户界面中获得换行。
<p>
abc def</br>
ghk lmn</br>
pqr tuv</br>
<p>
如何在没有标签的情况下进行换行
这篇文章讲述了在HTML和CSS中获得新行的多种方法。
在这里，声明的父元素p带有display:block，这意味着块级元素将被显示在新行中。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="main.js"></script>
</head>
<body class="p-4">
<p>
<span>abc def</span>
<span>ghk lmn</span>
<span>pqr tuv </span>
</p>
</body>
</html>
p span {
display: block;
}
你也可以使用display:grid 和display:flex ，在新的一行中显示文本，但flex 和grid 不是为了断行，而是为了安排元素的布局格式。
using html前tag or css white-space:pre
pre tag in html 保留了空格和格式化的文本，并占用了设备的可用宽度。
<pre>
abc def
ghk lmn
pqr tuv
</pre>
唯一的缺点是字体是使用单色的，可以用font-family 来覆盖。同样的情况也可以用div ，或者用white-space: pre-wrap; 的标签来实现。
<div style="white-space:pre-wrap">
abc def
ghk lmn
pqr tuv
</div>
你也可以使用pre-line 或pre 来实现white-space 的样式
<div style="white-space:pre-line">
abc def
ghk lmn
pqr tuv
</div>
字符空间预行和预包装的区别以及预
| 预 | pre-line | pre-wrap |
|---|---|---|
| 保留空白和制表符 | 保留空白处 | 不保留空白和折叠，保留制表符 |
| 用 \n 和 br 标签断行 | line are broken with \n, br tag | line is broken with \n |
| 用于代码格式化 | use for line break （用于换行）。 | use for line break\n and tab\t |
结论
学会了在HTML CSS中用多种方法将行分成多个无 标签的多种方法，包括以下方法
- display block css
- html pre标签
- pre、pre-line或pre-wrap的字段空间
也知道了pre、preline或pre-wrap之间的区别
