Bootstrap popover hides line breaks

Question

I am using the html code as follows to show the bootstrap popover

<a data-original-title="" data-content="Hi,            Welcome !             Sincerely,              programmer            "    data-placement="bottom">     content </a> 

And I initialized the popover as follows

$(this).popover({             html:true         }); 

All works fine but the problem is the content available in data-content not displayed with the spaces....It removes all the new lines and show it in the single line ....How can i overcome this....

Answer 1

You need to use <br/> for new line in html or use a <pre> tag

Ensure the data-html="true" attribute is present.

Answer 2

You can use white-space: pre-wrap; to preserve line breaks in formatting. There is no need to manually insert html elements.

.popover {     white-space: pre-wrap;     }