HTML <div> 带格式的标签

Question

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

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就没有了

有什么方法可以添加这些带格式的行吗？

Answer 1

\r 并没有按照您认为的那样去做。它被称为 "carriage return" 并且在某些操作系统中（主要是 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>

HTML <div> 带格式的标签

HTML <div> tag with formatting

html

angular

ngfor