2

How do you properly add a newline for a modal's content? I have a simple string: 

'Please check the Apple and/or \nOrange Folder checkbox to start program.'

I've put the '\n' newline character right before "Orange" so I would expect the modal to have two lines. However, when the modal is displayed, everything is presented on one line (the '\n' is not displayed so I'm sure typescript is seeing it properly and not making it part of the string).

Roka545
  • 3,404
  • 20
  • 62
  • 106
  • It shows as you are expecting. https://www.typescriptlang.org/play/#src=%0D%0Avar%20message%3A%20string%20%3D%20'Please%20check%20the%20Apple%20and%2For%20%5CnOrange%20Folder%20checkbox%20to%20start%20program.'%0D%0Aalert(message)%0D%0A – RKS_Code Nov 30 '16 at 01:33

4 Answers4

18

However, when the modal is displayed, everything is presented on one line (the '\n' is not displayed

Make sure the container has CSS white-space: pre. Without that newlines are ignored and multiple spaces are collapsed to one etc. This is just how html / CSS works.

basarat
  • 261,912
  • 58
  • 460
  • 511
9

In my case white-space: pre-line worked better then basarat's answer white-space: pre.

Petter Friberg
  • 21,252
  • 9
  • 60
  • 109
Hector
  • 143
  • 1
  • 6
  • THIS! white-space:pre is nice but it stops word wrap in my bootstrap table cells. white-space:pre-line gives you that crucial word wrap – darthgamer64 Oct 26 '21 at 18:53
4

In my case also white-space: pre-line or white-space: pre-wrap provided the desired result.

Choosing the white-space: pre overflowed the modal boundaries.

theshinylight
  • 233
  • 4
  • 8
1

Another possible solution is to use the HTML-tag for a line break: <br> To do that in the context of angular you need to use the innerHTML-Property like this:

<p [innerHTML]=" variableIncludingHTML "></p>

Here you can find further information: Angular HTML binding

GuidoD
  • 11
  • 5