mickeymouse Posted February 27, 2020 Share Posted February 27, 2020 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 comment Share on other sites More sharing options...
dsonesuk Posted February 27, 2020 Share Posted February 27, 2020 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 comment Share on other sites More sharing options...
mickeymouse Posted March 3, 2020 Author Share Posted March 3, 2020 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 comment Share on other sites More sharing options...
dsonesuk Posted March 3, 2020 Share Posted March 3, 2020 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 comment Share on other sites More sharing options...
mickeymouse Posted March 3, 2020 Author Share Posted March 3, 2020 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 comment Share on other sites More sharing options...
dsonesuk Posted March 3, 2020 Share Posted March 3, 2020 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. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now