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: https://stackoverflow.com/questions/49660349/how-to-create-line-breaks-in-console-log-in-node/49660376 — Florent Arlandis, Jul 22 '20 at 08:07
@FlorentArlandis Hey!Thank you for replying.I added some code. — mamadgi aishwarya, Jul 22 '20 at 09: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, Jul 22 '20 at 09:46
@Hugh I want to add a new blank line when the user press enter while posting the content — mamadgi aishwarya, Jul 22 '20 at 10:36

score 0 · Answer 1 · answered Jul 22 '20 at 11:27

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 '20 at 11:27

Hugh

371
1
8

do we have any easier solution? – mamadgi aishwarya Jul 22 '20 at 14:13
Not if you want to use ``. 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. – Hugh Jul 22 '20 at 22:44

Add extra new line in the output using CSS, Javascript

1 Answers1