Multi-line buttons in HTML

Question

If the width of a button element isn't wide enough to contain the button text Firefox and Chrome give the button more height, IE (v7 at least) will just cut off. How can I make IE expand the height to contain the text? Ideally just using CSS.

I've tried explicitly giving IE7 a height that makes the button bigger but it still just displays one line of cut off text.

<button style="width:40px;">Some really long text that is more than 20px</button>

In the real version I'm using the ButtonGroup YUI control so can't use <input> elements.

Answer 1

I don't have IE7 installed, but adding a DIV inside the button works in IE6:

<button style="width:40px;"><div style="height: 100%">Some really long text that is more than 20px</div></button>

Example in action.

Answer 2

CSS Only Button – Redux

http://www.binarymoon.co.uk/2010/06/css-button-redux/