Word Wrap for Button Text?

[mickeymouse]

How can I get word wrap for button text?
I've tried several ways (one below) but nothing works.

<style type=\"text/css\">
w.{word-wrap:break-word;}
</style>

<input type='submit' style='background-color:red;width:430;height:150;font-size:40;font-weight:bold' class='w' value='RAYER les DERNIER (de 1 à 99)>

 

[dsonesuk]

1) Inputs are inline elements, they are not controlled by defined height, width through css, but by content. They need to converted to block or inline-block using display property.

2) You also need to provide more than a value for width or height, you need to provide unit px, em, rem or %.

[mickeymouse]

I don't see how the Display Property is going to help me.

I'm just trying to format my BUTTON to word wrap (as can be done in Excell for instance) so that I don't need to have a button that is excessively wide.

 

[dsonesuk]

Inline elements don't care what width you use, the width is determined by content ONLY, NOT  a set width using CSS, so they will continue to get wider. By using display: BLOCK; to turn into BLOCK element, the width is NOW applied, so when text extend beyond the NOW FIXED width, it has no option but to move to a new line. THAT IS THE DIFFERENCE IN USING DISPLAY PROPERLY.

[mickeymouse]

I don't quite understand all this but I will work on it.  However, I've defined a button with style='width:100'  and  it stays the same width no matter what value I assign and if my value is greater than the width, the extra just doesn't show - that's why I was trying to get word wrap.

[dsonesuk]

Use button tag with type="submit" not input.

class selector is .w NOT w., width, height, font-size require unit px, em or rem etc before they will work.