How to wrap text of HTML button with fixed width?

user_83528 0
Viewed 287474

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?

<td class="category_column">
  <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;"
  />
</td>

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.

button word-wrap css html
8 Answers

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_320240

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_79220
Related