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

修剪并过滤掉空行。

＆＃13;

// 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')

＆＃13;

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

＆＃13;

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

不要使用＆＃34; pre＆＃34;标签。使用简单的

<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中的预标记打印出来，因为它没有自动换行和空格。

删除div中的空行

4 个答案: