Is it possible to output value of 'submit' in two rows?

Question

I have a mini form and I need the long text of the value of submit button to be broken down in two rows so it will fit the width of the parent div. I tried setting the width of the submit button but that does not do the trick.

Answer 1

Use <button type="submit"> instead of <input type="submit">. This will allow you to provide the button's contents as HTML instead of plain text, allowing you to format the button's contents however you want.

The most basic solution would be to manually include a line break:

<button type="submit">Foo<br/>Bar</button>

And of course you can also use more advanced CSS layouts for the button contents.

See it in action.

Answer 2

Wrap the text you want on 2nd row in <span> and:

span{
    display:block
}

Answer 3

<style>
.buttontext {
  width: 10px;
  white-space: wrap;
  display: block;
}
</style>
<button><span class=buttontext>Very long text Very long text
Very long text</span></button>

This will wrap the text over the lines required.

Answer 4

The following will wrap the text on a button. Notice that I have specified a width.

<input type="button" value="This is some text on the button" style="white-space:normal; width:100px;" />