Компонент readonly в angular не показывает разрывы строк

Question

Я работаю над приложением Angular с C #.И у меня есть некоторые компоненты только для чтения для отображения сохраненных данных из базы данных.Например, я вставил в компонент Textarea следующий текст:

hello 

there




hello

, так что это с пробелами.Тогда он будет правильно сохранен в базе данных.Потому что, когда я выбираю для редактирования, текст будет отображаться правильно.Но после того, как я сохраняю текст и выбираю для деталей текст.Тогда алинеи не показываются правильно.Потому что алинеи были удалены.

Я пытался с , но тогда текст будет отформатирован правильно, но это нарушит макет.

Так что если я сделаю это:

<code>  <pre>
    <afw-readonly [resources]="resources" fieldResourceKeyPrefix="beschrijving"
      [fieldValue]="learningPathDetails.description" [enableHtml]="false" 
      [readMoreCharLimit]="300"
      ></afw-readonly>
  

тогда форматирование будет показано правильно.Но макет сломан.

Так как это исправить?Спасибо

Answer 1

<pre> очень полезно для поддержки новых строк, но может нарушить компоновку. Дело в том, что вы можете сделать то же самое с помощью CSS.

var someText = `This is some text with some new lines.
Line 1
Line 2

Line 3. Kewl.`;

$("pre").text(someText);

$(".simulate-pre").text(someText);

$(".no-pre").text(someText);

.margins * {
  margin: 5px 0;
}

.real-pre {
  border: 1px solid red;
}

.simulate-pre {
  border: 1px solid purple;
  white-space: pre-line;
}

.no-pre {
  border: 1px solid black;
}