How to push long whitespace to next line in a pre-wrap html

Question

I'm trying to make a kind of text editor that preserves long whitespace and doesn't hide it also on line breaks, but instead pushes it to next line.

|That means that if i have a  |
|line like this one here      |

And I insert two more spaces at the end of the first line, i want to get

|That means that if i have a  |
| line like this one here     |

One space was added to the end of the first line, but then when there was no more room, the next space was wrapped to the next line.

And here with all typed spaces shown as underscores, this:

|That_means_that_if_i_have_a_ |
|line_like_this_one_here      |

to this:

|That_means_that_if_i_have_a__|
|_line_like_this_one_here     |

Is there a way to do it just in html/css?

I can imagine how to do it in javascript, but would like to avoid.

Answer 1

Whenever you write text , write a space like this