title: How to wrap text of HTML button with fixed width?
body: <p>I just noticed that if you give an HTML button a fixed width, the text inside the button is never wrapped. I've tried it with word-wrap, but that cuts of the word even though there are spaces available to wrap on.</p>
  
  <p>How can I make the text of an HTML button with a fixed width wrap like any tablecell would?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;td class="category_column"&gt;
    &lt;input type="submit" name="ctl00$ContentPlaceHolder1$DataList1$ctl12$ProCat_NameButton" value="Roos Sturingen / Sensors" id="ctl00_ContentPlaceHolder1_DataList1_ctl12_ProCat_NameButton" class="outset" style="height:118px;width:200px;font-size:18px;color:#7F7F7F;width:200px;white-space:pre;"
    /&gt;
  &lt;/td&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>The CSS classes do nothing but adding borders and modify the padding.
  If I add <code>word-wrap:break-word</code> to this button, it will wrap it like this:</p>
  
  <pre><code>Roos Sturingen / Sen
  sors
  </code></pre>
  
  <p>And I don't want it to cut of in the middle of a word if it is possible to cut it off between words.</p>