Peter Peter - 7 days ago 5
CSS Question

How to wrap text of html button with fixed width

I just noticed that if you give a 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 dont want it to cut of in the middle of a word if it is possible to cut it off between words.

Thanks

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

Hope it helps.

Comments