Marshall Marshall - 8 days ago 4
CSS Question

How to use Pre tag in html?

I'm using a <pre> tag in my design. The thing is my pre even breaks the words at the end of the line. Say I'm at the end of the line and if there is a large word then it breaks it. For example at the end of the line we have a large word say STACKOVERFLOW.

So my pre tag display the word STACKOVERFLOW as:

STAC
KOVERFLOW


Where as it should show the whole word in the new line.

Following is my code for pre tag:

pre{
white-space: pre-wrap;
word-wrap: break-word;
}


Following is my HTML Code:

<div uib-carousel active="active" class="text-primary">
<div uib-slide index="$index" class="uibSlider" ng-repeat='summary in desc'>
<pre class="text-justify">{{summary.info}}</pre>
</div>
</div>

Answer

Hu! So, after hanging around with this issue, I got rid of this with the help of one of the anwsers in stack overflow. So basically following is the answer:

pre
{
        white-space: pre-wrap;
        **word-break:keep-all;** 
 }

I just replaced word-wrap: break-word; to wor-break:keep-all and it solved my problem.

I appreciate everyone's continuous effort and thank you for all the answers.

Best Regards,

Sandeep