如何在预包装html中将长空格推送到下一行

Question

我试图创建一种文本编辑器来保留长空格，并且也不会在换行符时隐藏它，而是将其推送到下一行。

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

我在第一行的末尾再插入两个空格，我想得到

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

在第一行的末尾添加了一个空格，但是当没有空间时，下一个空格被包裹到下一行。

这里所有类型的空格都显示为下划线，这个：

|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

您可以在父类上使用css属性white-space: pre;来保留HTML中的空格

.classname tagname { white-space: pre; } 

e.g。

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

HTML的内容如下所示

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

Answer 2

每当你写文字时，写一个这样的空格