title: can't make CSS word-wrap: break-word work
body: <p>I have a problem where a wide form button will not wrap to the next line when the browser width is less than the button when displayed on one line.</p>
  
  <p><a href="https://jsfiddle.net/SRD75/vqmo9ykg/4/" rel="nofollow">Jsfiddle</a></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;input type="submit" onclick="" tabindex="26" value="Help me develop better solutions for small business" class="gform_button button" id="gform_submit_button_1"&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>body {font-size: 16px;}
  .gform_button.button {
    background-color: #E96E39;
    border-radius: 1em;
    -moz-border-radius: 1em;
    -webkit-border-radius: 1em;
    hyphens: auto;
    word-wrap: break-word;
    box-sizing: content-box;
    font-size: 1em;
    color: #FFF;
    font-weight: 700;
    letter-spacing: 0.046875em;
    padding: 0.84375em 0.875em 0.78125em;
    text-transform: uppercase;
    max-width: 100%;
  }
  </code></pre>
  
  <p>How can I make the button wrap to the next line, and be at most 100% of the width of viewport?</p>
  
  <p>Thanks.</p>