Button wrap in IE7

The value property is sometimes changed to be really long, longer than 50px.

<input type="submit" Value="Really long" style="width:50px; white-开发者_JAVA百科space:normal" />

This works fine in IE8+ and firefox in that the text on the button wraps to the next line.

The problem is this has to work in IE7 and the text does not wrap.

Does anyone know how to make it wrap in IE7?

I'm unfortunately still supporting IE7 and came across this issue. If you're able to change <input /> to <button> you can nest a <span> inside of the button with display:inline-block to resolve the overflow issue.

<button>
    <span style="display:inline-block">Long button text goes here</span>
</button>

A bit of a kludge, but this will render mostly correct in IE7:

 <input type="submit" Value="Really 
 long" style="width:50px; white-space:normal" />

You basically have to add a line break in your HTML. This 'technique' is a work around... If you manually write your HTML it will be an option, but if your code is generated (e.g. ASP.Net), it may not work.

See this jsFiddle in IE7.

Not sure exactly what you wish to achieve, however, you may want to try using the size attribute in the input tag, AS WELL as your css.

<input size="50" type="submit" Value="Really long" style="width:50px; white-space:normal" />

Insert a <br /> into the value and make sure the doctype is correctly specified.