title: How to use Pre tag to restrict word break in HTML
body: <p>I'm using a &lt;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.<br>
  So my pre tag display the word STACKOVERFLOW as:  </p>
  
  <pre class="lang-none prettyprint-override"><code>STAC
  KOVERFLOW
  </code></pre>
  
  <p>Where as it should show the whole word in the new line.<br>
  Following is my code for pre tag:  </p>
  
  <pre class="lang-css prettyprint-override"><code>pre{
          white-space: pre-wrap;
          word-wrap: break-word; 
      }
  </code></pre>
  
  <p><strong>Following is my HTML Code:</strong></p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div uib-carousel active="active" class="text-primary"&gt;
    &lt;div uib-slide index="$index" class="uibSlider" ng-repeat='summary in desc'&gt;
  &lt;pre class="text-justify"&gt;{{summary.info}}&lt;/pre&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>