How to wrap text of HTML button with fixed width

Question

I just noticed that if you give an HTML button a fixed width  the text inside the button is never wrapped  I ve tried it with word-wrap  but that cuts of the word even though there are spaces available to wrap on   How can I make the text of an HTML button with a fixed width wrap like any tablecell would    x000D   x000D   lt td class  category column  gt  x000D     lt input type  submit  name  ctl00 ContentPlaceHolder1 DataList1 ctl12 ProCat NameButton  value  Roos Sturingen   Sensors  id  ctl00 ContentPlaceHolder1 DataList1 ctl12 ProCat NameButton  class  outset  style  height 118px width 200px font-size 18px color  7F7F7F width 200px white-space pre   x000D      gt  x000D   lt  td gt  x000D   x000D   x000D    The CSS classes do nothing but adding borders and modify the padding  If I add word-wrap break-word to this button  it will wrap it like this   Roos Sturingen   Sen sors   And I don t want it to cut of in the middle of a word if it is possible to cut it off between words

User · Answer

If we have some inner divisions inside  lt button gt  tag like this-   lt button class  top-container  gt       lt div class  classA  gt          lt div class  classB  gt             puts   some text to get print            lt  div gt        lt  div gt        lt div class  class1  gt          lt div class  class2  gt             puts   some text to get print            lt  div gt        lt  div gt   lt  button gt    Sometime Text of class A get overlap on class1 data because these both are in a single button tag  I try to break the tex using-   word-wrap  break-word             All browsers since IE 5 5      overflow-wrap  break-word         Renamed property in CSS3 draft spec       But this won t worked then I try this-  white-space  normal    after removing above css properties and got my task done   Hope will work for all

User · Answer

white-space  normal  word-wrap  break-word    Mine works with both

User · Answer

Multi-line buttons like that are not really trivial to implement  This page has an interesting  though somewhat dated  discussion on the subject  Your best bet would probably be to either drop the multi-line requirement or to create a custom button using e g  divs and CSS  and adding some JavaScript to make it work as a button

User · Answer

You can force it  browser permitting  I imagine  by inserting line breaks in the HTML source  like this    lt INPUT value  Line 1 Line 2  gt    Of course working out where to place the line breaks is not necessarily trivial     If you can use an HTML  lt BUTTON gt  instead of an  lt INPUT gt   such that the button label is the element s content rather than its value attribute  placing that content inside a  lt SPAN gt  with a width attribute that is a few pixels narrower than that of the button seems to do the trick  even in IE6  -

User · Answer

I found that you can make use of the white-space CSS property     white-space  normal    And it will break the words as normal text

User · Answer

I have found that a button works  but that you ll want to add style  height  100    to the button so that it will show more than the first line on Safari for iPhone iOS 5 1 1

User · Answer

white-space  normal     word-wrap  break-word     Both  worked for me

User · Answer

word-wrap  break-word    worked for me

[html] How to wrap text of HTML button with fixed width?

Examples related to html

Examples related to css

Examples related to button

Examples related to word-wrap