如何渲染 HTML 字符串并保留空格和换行符?
有时在编写 HTML 文件内容时,可能需要保留空格和换行符。您可能已经注意到,当您尝试在段落<p>标签或<div>标签中写入很多空格或换行符时,在网页浏览器中渲染 HTML 页面时,这些空格或换行符是不可见的。本文将介绍如何在渲染 HTML 页面时保留这些空格。
渲染 HTML 字符串并保留空格和换行符
使用 Pre 标签
保留空格和换行符的一种方法是使用预格式化的 HTML 标签<pre>。它以固定宽度字体显示文本,并按在<pre>标签中写入的 HTML 代码显示文本。
示例
<!DOCTYPE html>
<html>
<body>
<h3>HTML String Preserving Spaces and Line Breaks</h3>
<pre>
Hello world!
Welcome to Tutorialspoint.
Today we are learning about preserving
spaces and line
breaks in HTML.
</pre>
</body>
</html>
输出

使用 white-space 属性
另一种方法是使用样式。这可以与任何 HTML 元素一起使用,例如段落<p>标签、<div>标签和<span>标签。我们只需要指定 style 属性并将white-space定义为 pre-wrap。
示例
<!DOCTYPE html>
<html>
<body>
<h3>HTML String Preserving Spaces and Line Breaks</h3>
<div style="white-space:pre-wrap;">
Hello World!
Welcome to Tutorialspoint.
Today we are learning about preserving
spaces and line
breaks in HTML.
</div>
</body>
</html>
输出

广告
数据结构
网络
RDBMS
操作系统
Java
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP