Question

我想完全按照写入HTML元素的方式呈现文本块。因此，如果有多个连续的空格，我想渲染所有空格，而不是像默认的那样将它们截断为单个空格。我不能简单地用 代替空格，因为那不会断行。我仍然希望换行能自然发生。我将如何使用JavaScript做到这一点？

text.replace(/ /g, " ")-不换行。

我还尝试了text.replace(/ /g, " ")，其结果与默认行为相同-将多个空格截断为单个空格。

Answer 1

此处正确的工具不是JavaScript，而是CSS（具体来说，white-space属性值pre-wrap：

.no-collapse {
  white-space: pre-wrap;
}

<div class="no-collapse">
Lorem ipsum         dolor sit amet,    consectetur adipiscing elit.
            Nunc pellentesque felis id elementum         maximus.
Cras       facilisis dui         felis, ut tincidunt ante            sagittis ut.                  Ut pulvinar      tortor eu      massa porta,       sagittis maximus nisl       viverra.      Donec vel luctus          est.         Integer           semper commodo tortor,               quis elementum     ex fringilla vitae.   Aliquam erat volutpat.         Vestibulum   quis   risus   elementum,          ornare nulla non,   scelerisque lorem.

Nam
 at
  ante
   porttitor,
    tempus
     tellus
      quis,
       lacinia
        velit.
</div>

用JavaScript中的空格替换空格

1 个答案: