Thursday, January 24, 2013

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.

How can you make the text of an html button with a fixed width wrap?

Code Problem
<input type="submit" name="wrapText" value="How to wrap text of html button with fixed width" id="wrapText" style="height:118px; width:200px; font-size:18px; color:#7F7F7F; width:200px;" />

Solution
I found that you can make use of the white-space css property:
white-space: normal;

<input type="submit" name="wrapText" value="How to wrap text of html button with fixed width" id="wrapText" style="height:118px; width:200px; font-size:18px; color:#7F7F7F; width:200px; white-space: normal;" />

white-space Property
Value Description
normal Sequences of whitespace will collapse into a single whitespace. Text will wrap when necessary. This is default
nowrap Sequences of whitespace will collapse into a single whitespace. Text will never wrap to the next line. The text continues on the same line until a <br /> tag is encountered
pre Whitespace is preserved by the browser. Text will only wrap on line breaks Acts like the <pre> tag in HTML
pre-line Sequences of whitespace will collapse into a single whitespace. Text will wrap when necessary, and on line breaks
pre-wrap Whitespace is preserved by the browser. Text will wrap when necessary, and on line breaks
inherit Specifies that the value of the white-space property should be inherited from the parent element