Удалить пустые строки в 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> tag to <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 печатает, как без слов, и с пробелом в такте.

Answer 4

Вы используете pre tag, что означает предварительно отформатированный текст, что-то между этим тегом, будь то space или line-break, выход будет таким же, как и в комплекте.

Элемент HTML представляет собой предварительно отформатированный текст. Текст в этом элементе обычно отображается в непропорциональном («моноширинном») шрифте точно так же, как он выложен в файле. Пробел внутри этого элемента отображается как напечатанный.

Таким образом, вы могли бы использовать какой-либо другой тег, по-прежнему можно удалить пространство между этими предложениями, используя JavaScript, как добавляют Pranav C Балан

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