title: How to center and wrap text in HTML5
body: <p>I'm trying to build a simple HTML5 page that displays a URL in the center of the page.  I found some good answers here: </p>
  
  <p><a href="https://stackoverflow.com/questions/8187275/css-center-text-both-horizontal-and-vertical">CSS: Center text both horizontal and vertical?</a></p>
  
  <p>and I've been using the answer from James Johnson which works great.</p>
  
  <p>The problem is that I'm writing this page to be displayed on a small screen, and I need the URL to wrap correctly even though there are no line breaks.  Adding the word-wrap:break-word; option doesn't seem to help - the text is half cut-off on the screen.</p>
  
  <p>Does anyone know how I can get my centred text to wrap correctly?</p>
  
  <p>As requested, here's my exact code.  Instead of wrapping text, the border just grows larger than 200 pixels wide:</p>
  
  <pre><code>&lt;!DOCTYPE HTML&gt;
  &lt;html&gt;
  
  &lt;style type="text/css"&gt; 
  #container {     
      display:table;     
      border-collapse:collapse;   
      height:200px;   
      width:200px; 
      border:1px solid #000; 
  }          
  #layout {     
      display:table-row;    
  }            
  #content {     
      display:table-cell;   
      text-align:center;  
      vertical-align:middle;   
  word-wrap:break-word; 
  }            
  &lt;/style&gt;      
  &lt;div id="container"&gt;     
      &lt;div id="layout"&gt;     
          &lt;div id="content"&gt;     
  wefweflwjfijapowefjiaiwfejawi3af3ijwiiwajefajioaiwejcajjcap8uc83yw75078n377777777777777777777777777u9fjhfwjifwe7f902352698hiogn;lkegrierg90q3itoijaw4aw[igpjaw84h0q92jrjgauw-8rua 
          &lt;/div&gt;      
      &lt;/div&gt;    
  &lt;/div&gt; 
  
  &lt;/html&gt;
  </code></pre>