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
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 |
No comments: