使用 HTML <pre> 标签的解决方案
用于将预先格式化的文本放入 HTML 文档的 HTML <pre> 保留文本的空格和换行符。
使用 HTML <pre> 标记保留文本的空格和换行符的示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
</head>
<body>
<pre>生活终归还得继续。 今天很残酷， 明天很残酷，后天很美好。很多人死在了明天的夜里。
经历过风雨，才懂得阳光的温暖。
生活终归还得继续。
把痛苦停在昨天 把微笑留给明天。
</pre>
</body>
</html>
使用 CSS white-space 属性的解决方案
CSS white-space 属性决定了如何在元素内处理空白。
在下面的示例中，我们将文本添加到 <div> 元素中，然后将 white-space 属性设置为“pre-wrap”。
使用 <div> 上的 CSS white-space 属性保留空格和换行符的示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
div {
white-space: pre-wrap;
}
</style>
</head>
<body>
<div>
生活终归还得继续。 今天很残酷， 明天很残酷，后天很美好。很多人死在了明天的夜里。
经历过风雨，才懂得阳光的温暖。
生活终归还得继续。
把痛苦停在昨天 把微笑留给明天。
</div>
</body>
</html>
我们可以通过使用 <span> 元素而不是 <div> 来使用相同的方法。
使用 <div> 上的 CSS white-space 属性保留空格和换行符的示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
span {
white-space: pre-wrap;
}
</style>
</head>
<body>
<span>
生活终归还得继续。 今天很残酷， 明天很残酷，后天很美好。很多人死在了明天的夜里。
经历过风雨，才懂得阳光的温暖。
生活终归还得继续。
把痛苦停在昨天 把微笑留给明天。
</span>
</body>
</html>
如果我们不希望每个段落的第一行缩进，我们可以尝试以下示例，其中我们使用 white-space 属性的“pre-line”值。
使用 white-space 属性的“pre-line”值删除缩进的示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
div {
white-space: pre-line;
}
</style>
</head>
<body>
<div>
生活终归还得继续。 今天很残酷，明天很残酷，后天很美好。很多人死在了明天的夜里。
经历过风雨，才懂得阳光的温暖。
生活终归还得继续。
把痛苦停在昨天 把微笑留给明天。
</div>
</body>
</html>
日期：2020-06-02 22:15:11 来源：oir作者：oir