React output does not preserve line breaks

Question

Is there a way to preserve line breaks from user input. At the moment I am just getting the user input sending it to mongoDb and returning that text. However if my input is : "new line", my output would be "new line". Can anyone suggest a fix?

Did you check this? Might be useful: stackoverflow.com/questions/32469570/… — norbitrial
– norbitrial, Commented Jan 14, 2020 at 19:20

felixmosh · Accepted Answer · 2020-01-14 19:30:15Z

4

Use css white-space for styling it.

.foo {
  white-space: pre-line;
}

answered Jan 14, 2020 at 19:30

felixmosh

35.8k10 gold badges81 silver badges99 bronze badges

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

Comments

Abdulhakim · Accepted Answer · 2021-09-30 17:18:11Z

0

a small addition to @FELIXMOSH's correct answer: also use word-wrap because white-space property can cause overflowing sometimes. And apply this css to the element that will host the mongodb data.

anyClass {
  white-space: pre-wrap;
  word-wrap: break-word; 
}

answered Sep 30, 2021 at 17:18

Abdulhakim

76810 silver badges13 bronze badges

Collectives™ on Stack Overflow

React output does not preserve line breaks

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related