Abdullah Mamun-Ur- Rashid Abdullah Mamun-Ur- Rashid - 1 month ago 6
HTML Question

Why text is overflowed html button

I have following html button in my webpage:
Html menu button

css of these button is:

.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;
}


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:

<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>


Do you have any idea how to fix it?

Answer

Try adding a space before the open bracket.