Replace spaces with breaking spaces in JavaScript

Question

I want to render a block of text exactly as it's written into an HTML element. So if there are multiple consecutive spaces, I want to render all the spaces, rather than truncating them to a single space, as is the default. I cannot simply replace the spaces with  , as that would, ahem, not break lines. I still want line breaks to occur naturally. How would I go about doing this in JavaScript?

text.replace(/ /g, " ") - doesn't break lines.

I also tried: text.replace(/ /g, " "), which gave the same result as the default behavior - truncating multiple spaces into a single space.

Would the white-space: pre; css rule be relevant to your usage? Not quite what you asked for, but could be what you need. — Shadow
– Shadow, Commented Oct 25, 2018 at 5:29
@Shadow: pre would not break lines; what OP wants is pre-wrap. — Amadan
– Amadan, Commented Oct 25, 2018 at 5:30

Amadan · Accepted Answer · 2018-10-25 05:36:13Z

4

The correct tool here is not JavaScript, but CSS (specifically, white-space property value 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>

edited Oct 25, 2018 at 5:36

answered Oct 25, 2018 at 5:30

Amadan

200k23 gold badges252 silver badges321 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Replace spaces with breaking spaces in JavaScript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related