title: Break long words on small screens
body: <p>I have this line:</p>
  
  <pre class="lang-php prettyprint-override"><code>&lt;?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?&gt;
  </code></pre>
  
  <p>That is part of a code element.</p>
  
  <p>What I'm trying to do is to view the line on <em>small</em> screens (without horizontal scrolling).</p>
  
  <p>I have tried to style both <code>&lt;pre&gt;</code> and <code>&lt;code&gt;</code> with the help of <a href="http://www.w3schools.com/css/css3_text_effects.asp" rel="nofollow">http://www.w3schools.com/css/css3_text_effects.asp</a> - and still the line doesn't break!</p>
  
  <pre class="lang-css prettyprint-override"><code>code { 
    width: 90%;
    min-width: 200px;
    background-color: white;
    border: 1px solid black;
    margin: auto;
    font-size: 1rem;
    /* ... and now what? */
  }
  </code></pre>