How can I wrap button text in Opera?

Question

I have almost created a website that works in all major browsers flawlessly. Yesterday, I celebrated because that was true. Today, I found out that it is not.

Apparently, Opera won't wrap text on buttons. I tried everything that popped up in my searches - from spacing to outdated Mozilla Firefox hacks.

How can I tell Opera to wrap text on a button? Shortening the text is not an option, as the shortest it could be is still too long.

EDIT:

Here is a JSFiddle: http://jsfiddle.net/JavaAndCSharp/grX4H/

Answer 1

This is indeed a known issue in Opera, where more text formatting will be applied to BUTTON elements than to INPUT type=button. They should be equivalent, really.

I hope using BUTTON instead of INPUT type="button" is an acceptable workaround for you (fingers crossed - BUTTON might cause other rendering problems in other browsers..)

Seems Opera already has a bug on this - internally it's CORE-45335.

Answer 2

Uhm, yes it does? I didn't even do anything other than define the width of the button. I'd suggest that you have conflicting CSS.

http://jsfiddle.net/Qgdzx/

HTML:

<button>This is really long button text that should wrap after I define a fixed-width.</button>

CSS:

button{
    width:60px;
}

Output:

---

Edit after your update http://jsfiddle.net/CJbae/

HTML:

<form>
    <button id="littleWorld" type="button">really really long text that will probably overflow on opera</button> 
</form>

CSS:

#littleWorld{
    border-radius:40px;
    border-width:0px;
    width:250px;
    height:250px; 
    background-color:#808080;
    font-family:Arial, Helvetica, sans-serif;
    font-size:11px;
    font-weight:bold;
    color:#FFFFFF; 
}