Wrap text on an HTML input button with CSS
By David Pratt / Tags: css, html / 2 Comments / Published: 19-11-09
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:
white-space:normal;
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.
Subscribe via RSS
Twitter
JebPotly May 28th, 2011 at 2:51 pm
This did not work for me in Safari 5.0.5