刪除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標簽可以直接打印，沒有自動換行，並且帶有空格。