Text on a standard HTML input button doesn’t wrap by default, which can be a bit of a pain if you need to say something a bit more descriptive than a typical “add”, “go” or “submit”. The default behaviour for the width of a button is to expand the width to fit the text within – as with all inline elements.
When you have a lot of text within the value attribute of a button, it renders something like this:
<input type="button" value="A lot of descriptive text on a button" />
If you then reduce the width of the button with a bit of css, you get cropped button text like so:
<input type="button" value="A lot of descriptive text on a button" style="width:100px;" />
To wrap the text on the button isn’t immediately obvious, you might try altering the display property, but it probably won’t occur to you to try the following css rule:
Which will produce something like:
<input type="button" value="A lot of descriptive text on a button" style="width:100px; white-space:normal;" />
Now ain’t that great! It doesn’t work in IE6 by the way, so you might need a plan B…
If you can make do without wrapping the text on the button, you should check out this method to make prettier buttons.