CODEWITHSUNDEEP
javascripthtmlcss
Webdev
Webdev

Reputation: 647

Create a line break in the text inside span

I am using the following HTML in the application:-

<span style="display:inline-block;white-space: pre-line">I would like to discuss this: {"incidentId":"TG00040","desc":"Patient Details","reportdetails":"Patient Name:Bhawana \n Grade:10th \n Teacher:Meeta"}</span>

But am not able to create line breaks in the text. I have also tried using \n,\r and br tag but nothing seems to break. The expected output is:-

I would like to discuss this: {"incidentId":"TG00040","desc":"Patient Details","reportdetails":"Patient Name:Bhawana
Grade:10th
Teacher:Meeta"}

Upvotes: 1

Views: 6090

Answers (2)

jeremy-denis
jeremy-denis

Reputation: 6878

If data displayed in span contain the character \n and you can't modify it before display it in dom

you can use a simple js function to replace all \n occurence by <br/>

var span = document.getElementById('my-data');
span.innerHTML = span.innerHTML.replaceAll('\\n', '<br/>');
<span id="my-data">I would like to discuss this: {"incidentId":"TG00040","desc":"Patient Details","reportdetails":"Patient Name:Bhawana \n Grade:10th \n Teacher:Meeta"}</span>

just be careful to mastered dom modification when you replace innerHTML. here there is no risk but if you have based replace on user input you can have xss issue

Upvotes: 1

Bhargav Chudasama
Bhargav Chudasama

Reputation: 7171

use <br> instead of \n. Do you want output like this with a line break?

<span style="display:inline-block;white-space: pre-line">I would like to discuss this: {"incidentId":"TG00040","desc":"Patient Details","reportdetails":"Patient Name:Bhawana <br> Grade:10th <br> Teacher:Meeta"}</span>

Upvotes: 0

Related Questions