HTML <div>тег с форматированием - PullRequest
Новая
       10

HTML <div>тег с форматированием

0 голосов
/ 21 мая 2019

Привет, я работаю над угловым проектом и у меня есть строка (на самом деле это кусок кода) 

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 прошло

enter image description here

есть ли способ добавить эти строки с форматированием?

1 Ответ

1 голос
/ 21 мая 2019

\r не делает то, что вы думаете, что делает.Это называется «возврат каретки», и в некоторых ОС (в основном Windows, не знаю, есть ли другие) требуется до \n, чтобы вызвать разрыв строки.Фактически причиной отступа являются обычные встроенные или блочные элементы \t.

, которые не сохраняют пробелы, присутствующие в разметке.Однако есть специальный тег <pre>, который сохраняет пробелы.По умолчанию для семейства шрифтов также устанавливается моноширинный шрифт.

Чтобы имитировать тег <pre>, если по какой-либо причине необходимо использовать <div>, вы можете добиться того же результата, используя CSS'white-space: pre; и font-family: monospace. 

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

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


pre tag

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

div с CSS white-space: pre;

пакет testData;открытый класс testOverride extends mainClass {public void add (int a) {int c = a + b + 2;System.out.println (с);}}
...