How to wrap text of HTML button with fixed width?

You can force it (browser permitting, I imagine) by inserting line breaks in the HTML source, like this:

<INPUT value="Line 1
Line 2">

Of course working out where to place the line breaks is not necessarily trivial...

If you can use an HTML <BUTTON> instead of an <INPUT>, such that the button label is the element's content rather than its value attribute, placing that content inside a <SPAN> with a width attribute that is a few pixels narrower than that of the button seems to do the trick (even in IE6 :-).


I found that you can make use of the white-space CSS property:

white-space: normal;

And it will break the words as normal text.


white-space: normal;
word-wrap: break-word;

Mine works with both


   white-space: normal;
   word-wrap: break-word;

"Both" worked for me.