Render tree in html preserving white space

Question

Does anyone know how to render the following tree preserving white spaces properly?

<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>

Currently, it discards some of the w/spaces and breaks the nice tree:

instead of using a span with style, try a `
` tag for `preformatted` text ?? — Zak, Nov 16 '20 at 19:49
Does this answer your question? [How to change a span to look like a pre with CSS?](https://stackoverflow.com/questions/219219/how-to-change-a-span-to-look-like-a-pre-with-css) — Heretic Monkey, Nov 16 '20 at 19:50

G-Cyrillus · Accepted Answer · 2020-11-16T20:05:15.640

You need a monospace font, so no matter the character, the size it takes is the same for each characters

<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>

Searching on the web, you'll find lots of monospace fonts, Choose the ones that fits your design best.

Thank you G-Cyrillus. I used `Courier New`. – tash Nov 16 '20 at 21:31 — tash, Nov 16 '20 at 21:31

Render tree in html preserving white space

1 Answers1