Add extra new line in the output using CSS, Javascript

Question

I am creating a blog website. I am taking the input using a textarea and storing it in MongoDB. For displaying the data I use: white-space: pre-wrap;.

With pre-wrap if I give the input as:

hello
world

The output is:

hello
world

I want the output as:

hello

world

Code: Taking the input:

<form action="/post/compose" method="post">
    <div class="form-group">
      <label for="postTitle">Title</label>
      <input type="text" class="form-control" name="postTitle" >
      <label for="postBody">Body</label>
      <textarea class="form-control" name="postBody" rows="10" col="10"></textarea>
    </div>
    <button class="btn btn-success" type="submit">Publish</button>
</form>

Storing the input in database:

 const post=new Post({
      Title:req.body.postTitle,
      Content:req.body.postBody,
    
      });
      post.save();

Displaying the input

<div id="fullpost">
<h2 class="text-dark"><%= post.Title %></h2>
<p  class="text-dark" id="Postcontent"><%- post.Content %></p>
</div>

css:

#Postcontent{
  white-space: pre-wrap;
}

Now as I added white-space property if there is \n in the input ,in the output single whitespace is included.But I want two white spaces. Is it possible to do this without regex in Javascript? Please help. Thanks in advance.

You can check this link: stackoverflow.com/questions/49660349/… — Florent Arlandis
– Florent Arlandis, Commented Jul 22, 2020 at 8:07
@FlorentArlandis Hey!Thank you for replying.I added some code. — mamadgi aishwarya
– mamadgi aishwarya, Commented Jul 22, 2020 at 9:41
Do you want a new blank line after each entry, or do you want the text to display a 100% lineheight gap between each line of text displayed? — Hugh
– Hugh, Commented Jul 22, 2020 at 9:46

Hugh · Accepted Answer · 2020-07-22 11:27:01Z

0

Ok so it sounds like what you want is to display line breaks entered in the original text?

In that case, probably you don't want a <textarea>. You might like to use this approach by replacing your textarea with an element (say, a div) with contenteditable=true, and then using a JavaScript function to capture the contents of the div (you won't be able to get it with a standard form submission).

answered Jul 22, 2020 at 11:27

Hugh

3801 silver badge9 bronze badges

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

2 Comments

mamadgi aishwarya Over a year ago

😅do we have any easier solution?

Hugh Over a year ago

Not if you want to use <textarea>. The problem is you won't be able to tell the difference between a space and a line break when the form payload hits your server.

Collectives™ on Stack Overflow

Add extra new line in the output using CSS, Javascript

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related