Sentence is not taking /n

Question

I am having one message box in which I am having one div with some text. I am passing "1 am khushbu/n happy new year". It is not considering /n as command. ..It is taking it as text. I want that if I write:

"hello
I
am
"

It should be printed in next line. used also. I am using this style :

<div id="Stage_Scrolls_MessageBox_message_box_Text"
     class="Stage_Scrolls_MessageBox_message_box_Text_id" 
     style="position: absolute; 
            margin: 0px; 
            left: 12.61%; 
            top: 23.18%; 
            width: 165px; 
            height: 157px; 
            right: auto; 
            bottom: auto; 
            font-family: abel; 
            font-size: 21px; 
            font-weight: 400; 
            color: rgb(166, 33, 36); 
            text-decoration: none; 
            font-style: normal; 
            word-wrap: break-word; 
            text-align: center; 
            -webkit-tap-highlight-color: rgba(0, 0, 0, 0); 
            -webkit-transform: translateZ(0px); 
            line-height: 25px; 
            letter-spacing: 0px;">
      During this Season may the joy and love of &lt;/br&gt; Christmas be yours.
</div>

Answer 1

Check This: The working solution

please replace </br> with <br/>

 <p id="Stage_Scrolls_MessageBox_message_box_Text" class="Stage_Scrolls_MessageBox_message_box_Text_id" style="position: absolute; margin: 0px; left: 12.61%; top: 23.18%; width: 165px; height: 157px; right: auto; bottom: auto; font-family: abel; font-size: 21px; font-weight: 400; color: rgb(166, 33, 36); text-decoration: none; font-style: normal; word-wrap: break-word; text-align: center; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-transform: translateZ(0px); line-height: 25px; letter-spacing: 0px;">During this Season may the joy and love of <br/> Christmas be yours.</p>

Answer 2

Use <br /> tag or give a specific width for the div.

Answer 3

Try this:

<div>I am Khushbu Happy New Year</div>

CSS

div {

width: 5em;

}

Change The width according to your Requirement.

You can Try like this as well,

 <p>I am Khushbu, <br/> Happy New Year</p>

Answer 4

Edit 1

Since you are using AngularJS, it looks like AngularJS is where you need to look. There is something encoding your html entities to prevent XSS.

See this answer for some solutions: AngularJS is rendering <br> as text not as a newline

---

Previous Answer

I don't know what language or framework you are using, but you should check that your templating engine is not encoding your text. That's what looks to be happening here. Most templating engines will automatically encode html entities as a security precaution. There is a way to prevent the encoding by marking your output as safe.

If you are not using a templating engine. Maybe you are using PHP and are using htmlentities function, which will convert<br/> to <br/>. This is a good thing to do if you are displaying user input. It will help prevent XSS (cross-site scripting attempts).

In this case it looks like you are accepting user text, so you may want to do something like run htmlentities or equivilant and then do a string replace for \n and replace with <br /> tag. In php you could use nl2br.

If you're using a templating engine, there is likely a way to do something similar as well.

Answer 5

I got solution .

Solution : It is working now....We were setting text in div..Instead of that , we should set html ..So that it can set in dom

textField[0].innerHTML = textconfig.text.replace(/\r\n|\r|\n/g, "<br />");