Wrapping Text in a Button

liunx

Guest
Hello,<br />
<br />
I am using HTML generated buttons [for ease] and have tailored their text/background colour, width & height. The buttons in question appear in a 'navigational' frame down the left-hand side of the screen and I have defined a constant button width. I can amend the height [& width] of the buttons but so far cannot get 'longish' text in the buttons to wrap to fit the button - it just 'disappears' off the button. Therefore, is it possible to wrap text in HTML generated buttons?<br />
<br />
Code to follow:<br />
===============================================<br />
<INPUT TYPE=button STYLE="width:8em; height:4em; background=#444488; color:#FFFFFF" TITLE="Home Page" VALUE="Exceedingly Long Text Value Which I Want To Wrap"<br />
onMouseOver="window.status='Home Page'; return true"<br />
onMouseOut="window.status=''; return true"<br />
onClick="parent.mainarea.location.href='http://www.webdeveloper.com/forum/archive/index.php/mainarea.php'; return false"><br />
===============================================<br />
<br />
Many thanks,<br />
Andy<!--content-->Use <button> element instead of <input type="button"><br />
<!-- m --><a class="postlink" href="http://www.w3.org/TR/html4/interact/forms.html#h-17.5">http://www.w3.org/TR/html4/interact/forms.html#h-17.5</a><!-- m --><!--content-->Hello,<br />
<br />
Thanks for your reply.<br />
<br />
I have looked at your link however cannot locate the attribute of the <BUTTON> tag which is going to allow me to modify the button [ie. wrap the text of the button].<br />
<br />
To clarify; if I have a 'Submit' button in which the text is, for example 100 charcters long, how do i get the text inside the button to wrap around within the button, instead of it existing on just the one line?<br />
<br />
Many thanks,<br />
Andy<!--content-->Buttons created with the BUTTON element function just like buttons created with the INPUT element, but they offer richer rendering possibilities: the BUTTON element may have content. <br />
That means you can do this:<br />
<button>First line of text<br>Second line of text</button><!--content-->Thank you.<br />
Kind regards,<br />
Andy<!--content-->
 
Back
Top