时间戳

首页 > 解决方案 > 在 html 中渲染树保留空白

html - 在 html 中渲染树保留空白

问题描述

有谁知道如何正确渲染以下保留空白的树？

<html>
<head>
<meta charset="utf-8">
</head>
<body>
<span style="white-space: pre-wrap;">
└─--[TaskD-{'a': '0.28', 'b': '0.296', 'c': '0.364', 'e': '0.486'}]
    |---[TaskC-{'a': '0.28', 'b': '0.296', 'c': '0.364'}]
    |   └─--[TaskB-{'a': '0.28', 'b': '0.296'}]
    |       └─--[TaskA-{'a': '0.28'}]
    └─--[TaskE-{'c': '0.364', 'e': '0.486'}]
        |---[TaskF-{'c': '0.364'}]
        └─--[TaskG-{'c': '0.364'}]
</span>
</body>
</html>

目前，它丢弃了一些 w/空格并破坏了漂亮的树：

在此处输入图像描述

标签： htmlcss

解决方案

你需要一个等宽字体，所以不管是什么字符，每个字符的大小都是一样的

<span style="white-space: pre-wrap;font-family:monospace;">
└─--[TaskD-{'a': '0.28', 'b': '0.296', 'c': '0.364', 'e': '0.486'}]
    |---[TaskC-{'a': '0.28', 'b': '0.296', 'c': '0.364'}]
    |   └─--[TaskB-{'a': '0.28', 'b': '0.296'}]
    |       └─--[TaskA-{'a': '0.28'}]
    └─--[TaskE-{'c': '0.364', 'e': '0.486'}]
        |---[TaskF-{'c': '0.364'}]
        └─--[TaskG-{'c': '0.364'}]
</span>

在网上搜索，您会发现很多等宽字体，请选择最适合您设计的字体。

推荐阅读