带格式的 HTML <div> 标签答案

【问题标题】：HTML <div> tag with formatting带格式的 HTML <div> 标签
【发布时间】：2019-05-22 02:54:28
【问题描述】：

嗨，我正在做一个角度项目，我有一个字符串（实际上它是一段代码）

package testData;\r\n\r\npublic class testOverride extends mainClass {\r\n\r\n\tpublic void add(int a) {\r\n\t\tint c = a + b + 2;\r\n\t\tSystem.out.println(c);\r\n\t}\r\n}\r\n\

我需要突出显示这个字符串中的一些行，因为我将它从\n 中拆分出来并将其添加到一个数组中，这样我就可以循环突出显示我想要的行

在打字稿上

lineList:{};//line array
this.lineList = this.file.split("\n");//splitting and adding to array

在 html 上

<div *ngFor="let lines of lineList">
      <div>{{lines}}</div>
</div>

那么\r的格式就消失了

有什么办法可以在这些行中添加格式吗？

【问题讨论】：

您想如何展示\r？实际上把它放在 tye html 中？应该是tab(\t)？

标签： html angular ngfor

【解决方案1】：

\r 没有做你认为它正在做的事情。它被称为“回车”，在某些操作系统（主要是 Windows，不知道是否还有其他操作系统）中，它需要在 \n 之前导致换行。导致缩进的原因实际上是\t。

常规内联或块元素不会保留标记中存在的空白。但是，有一个特殊的标签<pre>，它确实保留了空格。它还将字体系列默认设置为等宽字体。

为了模仿<pre>标签，如果你出于某种原因必须使用<div>，你可以通过使用CSS'white-space: pre;和font-family: monospace来实现相同的输出。

.code {
  white-space: pre;
  font-family: monospace;
}

<h3>Regular div tag</h3>
<div>
package testData;
public class testOverride extends mainClass {
	public void add(int a) {
		int c = a + b + 2;
		System.out.println(c);
	}
}
</div>

<h3>pre tag</h3>
<pre>
package testData;
public class testOverride extends mainClass {
	public void add(int a) {
		int c = a + b + 2;
		System.out.println(c);
	}
}
</pre>

<h3>div with CSS <code>white-space: pre;</code></h3>
<div class="code">
package testData;
public class testOverride extends mainClass {
	public void add(int a) {
		int c = a + b + 2;
		System.out.println(c);
	}
}
</div>

【讨论】：