Wrap text on an HTML input button with CSS

By David Pratt / Tags: , / 6 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.

Category: Tech

Tags: ,

Posted: on November 19th, 2009 at 6:43 pm.

Feeds: RSS 2.0

6 Responses to “Wrap text on an HTML input button with CSS”

Gigante de Sousa April 5th, 2011 at 9:59 pm

Actually, it is important to say that this solution will only work if you use the correct DOCTYPE. If you fail to do so, IE still won’t render it right.
The doctype used in this page is a good example:

JebPotly May 28th, 2011 at 2:51 pm

This did not work for me in Safari 5.0.5

Ikram April 20th, 2012 at 8:50 am

white-space:normal; is not working in IE7. Could you please suggest any other alternative.

Ikram April 20th, 2012 at 8:57 am

please I need support in IE7 let me know what is solution for this.

Deepika October 17th, 2012 at 12:12 pm

white-space:normal;
padding-left:40px;
padding-right:40px;
text-align:center;
width:190px;

RonnieCosta May 5th, 2013 at 9:13 am

Works for HTML5

Leave a reply