How do you wrap the text on an input field with type="button"

Question

I want to put 2 lines of text on an input field.
The button size is fixed at 75 and if there is more than 10 characters it truncates the text.
The input field is defined as :
<input type="button"
value="CI<br>Discrepency"
class="buttons75x75"
onclick="javascript:callForm('ciDiscrepency');"/>
If you can show me how, I would really appreciate it.
-Gary

Answer 1

Dug up the code I used to do this a while back:
//The style sheet
  <style type="text/css">
    .buttonUp {
      border-style:outset;
      border-width:2px;
      width:3em;
      float:left;
      padding:2px;
      background-color:#ccc;
      text-align:center;
    .buttonDown {
      border-style:inset;
      border-width:2px;
      width:3em;
      float:left;
      padding:2px;
      background-color:#ccc;
      text-align:center;
</style>
//... Example buttons
  <div class="buttonUp" onmousedown="this.className='buttonDown';"
                        onmouseup="this.className='buttonUp';"
                        onclick="alert('Clicked on Small One');">He</div>
  <div class="buttonUp" onmousedown="this.className='buttonDown';"
                        onmouseup="this.className='buttonUp';">Hello</div>
  <div class="buttonUp" onmousedown="this.className='buttonDown';"
                        onmouseup="this.className='buttonUp';">Hello World</div>
  <div class="buttonUp" onmousedown="this.className='buttonDown';"
                        onmouseup="this.className='buttonUp';">Hello<br/>World</div>
  <div class="buttonUp" style="width:5em;" onmousedown="this.className='buttonDown';"
                        onmouseup="this.className='buttonUp';">Hello World</div>You could put any javascript you want on the onclick event, so you would call the javascript you previously used to submit the form and set the input name. In this example I had all the buttons be a fixed width, if you leave out the width in the style sheet then the block will snap to fill the same width as the text inside it, much like normal buttons do. The difference is, with a fixed width then text wrapping occurs automatically (like in the 3rd button) while without a defined width the div will only display a second line when the line break is added. Note the the fixed width can be over-ruled by an inline style if needed (last sample).
The website I pointed to before has a simpler solution (less javascript events needed). An implementation for his approach would be:
//The style sheet
  <style type="text/css">
    .button {
      border-style:outset;
      border-width:2px;
      color:#000;
      float:left;
      padding:2px;
      background-color:#ccc;
      text-align:center;
      text-decoration:none;
      display:block;
    .button:active {
      border-style:inset;
      border-width:2px;
      color:#000;
      float:left;
      padding:2px;
      background-color:#ccc;
      text-align:center;
      text-decoration:none;
      display:block;
  </style>
//... Example buttons
  <a class="button" href="#" onclick="this.blur();alert('Now you clicked linkey');return false;">Hello<br/>World</a>Same deal here with the fixed-width vs.fit-to-content. I add the 'return false;' to the list of the onclick commands so IE doesn't make the 'link clicked' noise and the URL doesn't go to thispage.html#.
All these buttons work in FireFox 2, IE 7, and Safari 3 if they are running in STRICT mode. The button colors and borders don't precisely match FF and IE buttons, but they are close (although they aren't close at all to Safari buttons).