刪除在格

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

不使用 「預」 的標籤。使用簡單的

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

我希望這有助於

Answer 3

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

與HTML，你可以做到這一點！ HTML中的Pre標籤打印時沒有單詞換行和空格。

Answer 4

您正在使用pre tag這意味着預格式化文本，包括在該標籤是否是space或line-break，作爲包括輸出將是相同的之間的任何。

HTML元素表示預先格式化的文本。此 元素中的文本通常以非比例（「等寬」） 字體的形式顯示，完全像它在文件中的佈局一樣。此 元素內的空白顯示爲鍵入。

所以，你可以使用一些其他的標籤，但你仍可以使用JavaScript那些句子之間移除空間由PranavÇ巴蘭作爲補充

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