如何渲染 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>

输出


Tanya Sehgal
Tanya Sehgal

Python 和 HTML

更新于:2024年9月30日

60 次浏览

启动你的职业生涯

完成课程获得认证

开始学习
广告
© . All rights reserved.