Why text is overflowed HTML button?

Question

I have following HTML button in my webpage:

The buttons have to be fixed width and if texts overflow it's width it should be wrapped by white-space:normal. The Search Staff (F2) and Select Item(F3) are wrapped correctly. But don't know why Company(F8) and Product(F4) buttons are not wrapping inside button. Here is the HTML layout for those button:

.menu_button {
  width: 100px;
  height: 50px;
  background-color: #D0D0D0;
  color: #0000FF;
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
  border-width: 4px;
  white-space: normal;
  vertical-align: middle;
}

<div id="option_bar">
  <input id="check" type="button" class="menu_button" name="list_item" value="Item&#13;&#10;(F1)" />&nbsp;&nbsp;
  <input id="check" type="button" class="menu_button" name="company" value="Company(F8)" />&nbsp;&nbsp;
  <input type="button" class="menu_button" name="search" value="Search Staff&#13;&#10;(F2)" />&nbsp;&nbsp;
  <input type="button" class="menu_button" name="select_item" value="Select Item&#13;&#10;(F3)" />&nbsp;&nbsp;
  <input type="button" class="menu_button" name="product" value="Products&#13;&#10;(F4)" />&nbsp;&nbsp;
  <input type="button" class="menu_button" name="bid" value="Bid&#13;&#10;(F6)" />&nbsp;&nbsp;
  <input type="button" class="menu_button" name="letter" value="Letter&#13;&#10;(F7)" />&nbsp;&nbsp;
  <input type="button" class="menu_button" name="price" value="Price&#13;&#10;(F9)" />&nbsp;&nbsp;
  <input type="button" class="menu_button" name="print" value="Print&#13;&#10;(F12)" />&nbsp;&nbsp;
</div>

How to fix it?

Answer 1

I am not sure what you are trying to achieve from this, but still you can add space between "Company" and "(F8)", that would do exactly what you require like in Search Staff (F2), similarly you can do this for Product (F4).

<div id="option_bar">
<input id="check" type="button" class="menu_button" name="list_item" value="Item&#13;&#10;(F1)" />&nbsp;&nbsp;
<input id="check" type="button" class="menu_button" name="company" value="Company (F8)" />&nbsp;&nbsp;
<input type="button" class="menu_button" name="search" value="Search Staff&#13;&#10;(F2)" />&nbsp;&nbsp;
<input type="button" class="menu_button" name="select_item" value="Select Item&#13;&#10;(F3)" />&nbsp;&nbsp;
<input type="button" class="menu_button" name="product" value="Products&#13;&#10;(F4)" />&nbsp;&nbsp;
<input type="button" class="menu_button" name="bid" value="Bid&#13;&#10;(F6)" />&nbsp;&nbsp;
<input type="button" class="menu_button" name="letter" value="Letter&#13;&#10;(F7)" />&nbsp;&nbsp;
<input type="button" class="menu_button" name="price" value="Price&#13;&#10;(F9)" />&nbsp;&nbsp;
<input type="button" class="menu_button" name="print" value="Print&#13;&#10;(F12)" />&nbsp;&nbsp;

Answer 2

Add space to before "(F8)" and before "(f4)"

Answer 3

You can use the word-wrap property.

The word-wrap property allows long words to be able to be broken and wrap onto the next line.

CSS syntax:

word-wrap: normal|break-word|initial|inherit;

p.test {
    word-wrap: break-word;
}

Another way you can the same result is add an space between parenthesis and the last word letter.

Answer 4

Try adding a space before the open bracket.