创建 HTML
- 使用一个 <h1> 元素和三个 <p> 元素。
<h1>onitroad</h1> <p>Books</p> <p>Quizzes</p> <p>Snippets</p>
添加 CSS
- 使用 ::before 伪元素。
- 在内容中添加回车符 (\A)。
- 将空白属性设置为“pre”。
p::before {
content: "\A";
white-space: pre;
}
其中我们可以看到完整的代码。
使用 :before 伪元素在 <p> 元素之前添加换行符的示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
p::before {
content: "\A";
white-space: pre;
}
</style>
</head>
<body>
<h1>onitroad</h1>
<p>Books</p>
<p>Quizzes</p>
<p>Snippets</p>
</body>
</html>
在下一个示例中，元素前的换行符也使用 :before 伪元素添加，并通过使用回车符和将 display 属性设置为“块级”值，因为块元素从新行开始填充整个可用宽度。
其中我们使用 <span> 元素。
使用 :before 伪元素在 <span> 元素之前添加换行符的示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
span::before {
content: "\A";
white-space: pre;
display: block;
}
</style>
</head>
<body>
<h1>onitroad</h1>
<span>Books</span>
<span>Quizzes</span>
<span>Snippets</span>
</body>
</html>
在我们的最后一个示例中，添加了一个换行符，而没有使用 :before 伪元素。
我们只将 white-space 属性设置为 <p> 元素的“pre-line”值。
在没有 :before 伪元素的元素之前添加换行符的示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
p {
color: #fc0303;
white-space: pre-line;
font-size: 20px;
}
</style>
</head>
<body>
<h1>onitroad</h1>
<p>
生活本就是矛盾的,白天与黑夜间的距离,春夏秋冬之间的轮回,于是有了挑剔的喜爱,让无奈加上了喜悦的等待。
是谁把光阴剪成了烟花，一瞬间，看尽繁华。是谁把思念翻起了浪花，一转身，浪迹天涯。
</p>
</body>
</html>
在本教程中，我们将展示一些在元素前添加换行符的方法。
这可以通过几个步骤轻松完成。
我们需要使用 CSS white-space 属性来指定必须如何处理元素内的空间。
特别是，我们将使用此属性的“pre”值。
从创建 HTML 开始。
日期：2020-06-02 22:14:54 来源：oir作者：oir