Muli-line button in IE

I'm currently in a horrible situation that requires me to style an input of type "button" over two lines. Having a fixed width on the button causes the text within the button to wrap onto two lines in all other browsers except IE.

My question is therefore, how do I specify that an input with value="Button to Wrap" wraps onto two lines in IE?

I'm willing to accept any hacks or workarounds to make this happen.

Much appreciated!


Use the button element instead - it can contain other markup:

<button type="button">
First Line<br />
Second Line<br />
Third Line<br />

What works for me is to set CSS white-space to pre-line of the button input with a fixed width.

But only the first line will be visible on the button input. So height must be set to a fixed value or to auto.

Have you tried hard returns in your source code? Works for me...

<input type='button' value='3

The word-wrap CSS attribute seems to be the word on this one. If that doesn't work, you'll have to try using a div tag style to look like a button and an onClick handler...

<input type=button value="test" style="word-wrap: break-word"></input>

This might need position, height and width attributes as well to work.

Have you tried using br tags?

What works for me is to add a child span to the button, set its display to block and limit its width as the button's is.

It only affects IE 8 and 9 when the document is in IE7 mode.

Why not to use image button? Make image for button, and pressed button... Or make button in flash (:

Need Your Help

css/bootstrap - how do i keep text from overflowing button?

css angularjs twitter-bootstrap twitter-bootstrap-3

I have a button group where I would like to keep the text inside the element. I don't write CSS much and would love to solve it using twitter bootstrap

QMOBILE,TECNO,ALPS java.lang.NoClassDefFoundError:

android android-actionbar noclassdeffounderror

It's not only Samsung Devices. I get the same exception on this three devices: QMOBILE,TECNO,ALPS