title: Force text to wrap
body: <p>This is my website's main menu:</p>
  
  <p><img src="https://i.stack.imgur.com/cGSzE.jpg" alt="enter image description here"></p>
  
  <p>As you you'll notice, the text inside main menu's items isn't wrapping. I've tried many solutions suggested but nothing seems to affect these items. Here's the css code:</p>
  
  <pre><code>#pt_custommenu .parentMenu a{
      width: 100px; height: 59px;
      line-height: normal;
      padding-top: 0; padding-bottom:0; 
      float:left;
      display: inline-block;
      position: relative;
      text-transform: none;
      word-wrap: normal;
      white-space: normal !important;
  }
  </code></pre>
  
  <p>I'd like to make text break into two lines, like it would normally do, since the <code>&lt;a&gt;</code> element has a standard width and height. </p>
  
  <p>Any suggestions?</p>