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:

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

,

, and

. Also text "blocks" like

and

. 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 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... :)