删除div中的空白行

Question

我有一个标签：

<pre>
     this is a

    this is b


       this is c
</pre>

在浏览器解析之后，它输出：

     this is a

    this is b


       this is c

我想要的是：

this is a
this is b
this is c

有什么方法只能使用客户端方法来执行此操作吗？

将<pre>标签更改为<div>吗？ 但这变成了单行，不是我想要的。

添加CSS？ 我没有找到实现的风格。

还是使用JavaScript？

PS ： <pre>标签中的内容是由液体模板{{ post.content}} ，它是不可变的 。

Answer 1

修剪并过滤出空行。

 // get the pre tag var pre = document.querySelector('pre'); pre.innerHTML = pre.innerHTML // split by new line .split('\\n') // iterate and trim out .map(function(v) { return v.trim() // filter out non-empty string }).filter(function(v) { return v != ''; // join using newline char }).join('\\n') 

 <pre> this is a this is b this is c </pre> 

Answer 2

您正在使用pre tag ，即预格式化的文本，此标签之间包含的任何内容（无论是space还是line-break ，输出都将与包含的内容相同。

HTML元素表示预格式化的文本。 此元素内的文本通常以与文件中所布置的完全非比例（“等宽”）字体显示。 此元素内的空格显示为已键入。

因此，您可以使用其他一些标记，但仍然可以使用Pranav C Balan添加的JavaScript删除这些句子之间的空间

 <pre> Hi xyz demo text.Hi xyz demo text. Hi xyz demo text. Hi xyz demo text. </pre> 

Answer 3

不要使用“ pre”标签。 使用简单

<div>this is a</div>
<div>this is b</div>
<div>this is c</div>

我希望这有帮助

Answer 4

<p>
 this is a<br/>
 this is b<br/>
 this is c<br/>
</p>

使用HTML，您可以做到这一点！ HTML中的pre标签可以直接打印，没有自动换行，并且带有空格。