Muli-line button in IE

Question

I am currently in a terrible situation that requires me to type input like "button" on top of two lines. The presence of a fixed width on the button causes the text inside the button to wrap on two lines in all other browsers except IE.

So my question is, how can I indicate that an input with a value of = "Button to Wrap" is wrapped in two lines in IE?

I am ready to accept any hacks or workarounds for this to happen.

Very valuable!

Answer 1

Use the button element instead - it may contain different markup:

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

Answer 2

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

But only the first line will be visible at the input of the button. Thus, the height must be set to a fixed value or automatically.

Answer 3

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

 <p> <input type='button' value='3 Line Button' /> </p> 

Answer 4

The CSS attribute for a dictionary is the word on it. If this does not work, you will have to try using the style of the div tag so that it looks like a button and an onClick handler ...

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

For work, you may need the attributes of position, height and width.

Answer 5

Have you tried using br tags?

Answer 6

What works for me is to add a child range to the button, set its display to lock and limit its width as a button.

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

Answer 7

Why not use the image button? Make an image for the button and press the button ... Or make the button in flash (: