使用 CSS、Javascript 在输出中添加额外的新行

Question

我正在创建一个博客网站。我正在使用 textarea 获取输入并将其存储在 MongoDB 中。用于显示我使用的数据：white-space: pre-wrap;。

如果我将输入输入为：

hello
world

输出是：

hello
world

我希望输出为：

hello

world

代码： 接受输入：

<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>

将输入存储在数据库中：

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

显示输入

<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;
}

现在我添加了 white-space 属性，如果输入中有 \n ，则在输出中包含单个空格。但我想要两个空格。 是否可以在没有 Javascript 中的正则表达式的情况下做到这一点？请帮忙。提前致谢。

Answer 1

好吧，听起来您想要显示在原始文本中输入的换行符？

在这种情况下，您可能不需要<textarea>。您可能想使用this approach，通过将textarea 替换为contenteditable=true 的元素（例如div），然后使用JavaScript 函数捕获div 的内容（您将无法通过标准表单提交获得它）。