如何在预换行中将长空格推到下一行 html

Question

我正在尝试制作一种文本编辑器，它保留长白色space并且不会在换行符处也隐藏它，而是将它推到下一行。

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

然后我在第一行末尾再插入两个space，我想得到

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

一个 space 被添加到第一行的末尾，但是当没有更多空间时，下一个 space 被换行到下一行。

此处所有键入的 space 均显示为下划线，即：

|That_means_that_if_i_have_a_ |
|line_like_this_one_here      |

对此：

|That_means_that_if_i_have_a__|
|_line_like_this_one_here     |

有没有办法只在 html/css 中做到这一点？

我可以想象如何在 javascript 中做到这一点，但我想避免。

Answer 1

您可以在父 class 上使用 css 属性 white-space: pre; 来保留 HTML

中的空格

.classname tagname { white-space: pre; }

例如

.editor a, .editor td, .editor span { white-space: pre; }

HTML 如下所示

<div class="editor">
    <!-- span a td-->
</div>

Answer 2

每当你写文字时，写一个 space 这样  

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