Wrapping an HTML input button's text value over multiple lines

Question

How do I move text to a new line in an HTML input element with the type="button" attribute?

I have following code:

<input type="button" id="btnTexWrapped" value="I see this is a long sentence here." style="width: 200px;" />

I want the button's text value to be wrapped in two lines. I tried typing it into the next line in HTML. It didn't work as I expected:

<input type="button" id="btnTexWrapped" value="I see this is a long 
sentence here." style="width: 200px;" />

I also tried using all options of white-space with fixed width: 200px;, but still nothing works.

I am OK with statically fixing the length, width, or other values: as the control is not going to change.

Answer 1

For anyone reading this question 4 years later, I would like to add some clarifying details. Lokesh's answer is the correct one (not the accepted answer), but the initial question is based on a misunderstanding of how HTML works, which no one has addressed.

HTML is not a white-space significant language. That is, any new lines are completely ignored by the browser. While you can (and should!) put new lines in your HTML code in order to write readable, maintainable HTML, it will (almost) never affect the end result (I won't get into exceptions here).

As Lokesh indicated, you can use the <br /> tag to force a new line. Another common way is to use block level elements, such as div or section.

A number of elements are set to block by the browser UA stylesheet. They are usually container elements, like <div>, <section>, and <ul>. Also text "blocks" like <p> and <h1>. Block level elements do not sit inline but break past them. By default (without setting a width) they take up as much horizontal space as they can.

This is a quote from https://css-tricks.com/almanac/properties/d/display/, which is a very good reference on the different properties for the display attribute.

Additionally, I don't recommend trying to use any of the other suggested solutions which require putting encoded newline symbols inside the value attribute. This is pushing the input tag beyond was it was designed for. If you need more complex content for a button, the button tag is more appropriate. In fact, I generally don't think there's ever good reason to use <input type="button"> instead the button tag. It's much more semantic, easier to read, and is infinitely more flexible - for example, in allowing breaks and other elements (such as images!) inside it.

Just a bit of knowledge and a few recommendations from a professional web developer... :)

Answer 2

Try this, you can see how it works instantly:

<input type="button" value="Carriage&#13;&#10;return&#13;&#10;separators" style="text-align:center;">