javascript - Readonly component in angular doesn't show line breaks

Question

I am working on a Angular with C# application. And I have some read-only components for showing saved data from the database. For example I put in a Textarea component the following text:

hello 

there




hello

so this is with spaces. Then it will correctly saved in the database. Because when I choose for Edit the text will been show correct. But after I save the text and I choose for details the text. Then the alinea's are not correctly been showing. Because the alinea's are been removed.

I tried with <pre></pre> but then the text will be formatted correctly but it breaks the layout.

So if I do this:

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

then the formatting will be shown correctly. But the layout is broken.

So how to correct this? Thank you

标签： javascriptc#angularreadonly

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;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="margins">
  <pre class="real-pre"></pre>
  <div class="simulate-pre"></div>
  <div class="no-pre"></div>
</div>