Create input type="button" with two lines of text for newer version of chrome

Question

I will accept an answer of "not possible" if someone can explain why. However, I will not except an answer with using a <button> because that is not what this question is asking.

I am trying to make an input button with two lines of words, but the newer versions of chrome are not letting me, here is what I have tried:

Carriage Return Separators

    <input type="button" value="Line One&#13;&#10;Line Two"/>        <input type="button" value="Line One\r\nLine Two">

I know you can use white-space: normal; but this will not let you <br> where you want it to.

input[type="submit"] {     white-space: normal; } 

Is there a way that I can add the new line in the button where I choose?

i.e.

line one

line two

Answer 1

Although I can't prove that it's not possible, it's not a good idea to try to make the input button take up multiple lines. First of all, the HTML5 spec says only this about the value attribute:

If the element has a value attribute, the button's label must be the value of that attribute

Notice that "button's label" is not defined anywhere in the spec. That means it is up to browser vendors to choose how to interpret that, and it also means that they can change their interpretation at will.

You just witnessed the Chrome team deciding to make such a change. It could happen again, in another browser perhaps. So any solution you find now will not be permanent and subject to the whims of browser vendors.

That's why I strongly recommend using the <button> element. Because it is guaranteed by the spec to allow you to do HTML formatting, like line breaks.