Jump to content

Word Wrap for Button Text?


Recommended Posts

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)>

 

Link to post
Share on other sites

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 %.

Link to post
Share on other sites

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.

 

Link to post
Share on other sites

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.

Link to post
Share on other sites

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.

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...