How to add a line break into a submit input - html

Question

I was looking for a way to display the value of an
<input type="submit">
on 2 lines, so potentially add a line break in it, but i tried multiple stuff such as :
<br>
\r\n
\n
The result should be like this (On the right side of the picture) :
Nothing works. Anyone got a clue on this ?

Answer 1

Add this to your css:
A white-space property will allow to have input in multiple lines
input[type="submit"] {
white-space: normal;
width: 150px;
float:right;
text-align: right;
}
<input type="submit" value="J'essaie gratuitement 30 jours" />
Two other methods are
<button type="submit">Multiple line<br/>input</button>
and
using
carriage return in between the input value as:
<input type="button" value="Multiple line
input" style="text-align:center;">
The last method however doesn't work in IE10

Answer 2

Use button instead of input:
.right-aligned {
text-align: right;
}
<button type="submit" class="right-aligned">Text <br /> broken </button>
Buttons can accept a variety of other tags inside, such as <br />, <span>.
Then, you can style it with CSS however you wish (see the CSS class and rules in the code snippet).

Answer 3

I think you try this in HTML:
Just as example help for you:
<input type="button" value="Really
Tall
Button">

Answer 4

This is working for me:
div.full {
width:500px;
background-color:grey;
}
div.left {
float:left;
width:60%
}
button {
width:40%;
text-align:right;
cursor:pointer;
}
div.underline {
width:100%;
}
<div class='full'>
<div class='left'>
there is a part of text
</div>
<button>J'essaie gratuitement
<div class='underline'>30 jours</div>
</button>
</div>
I just added some CSS to keep the size of the button. and line breaks are not a very good practice. You'd better do it with css.

Answer 5

Alternatively, use a standard <a> or <span> tag.
var submits = document.getElementsByClassName('submit');
for (var i = 0; i < submits.length; i++) {
submits[i].addEventListener('click', function() {
alert('submit!');
document.getElementById('form_to_submit').submit();
});
}
.submit {
text-decoration: inherit;
color: inherit;
display: inline-block;
border: 1px solid #222;
border-radius: 2px;
padding: 2px 4px;
background: #eee;
cursor:pointer;
text-align:right;
}
<p>J'essaie gratuitement<br>30 jours</p>
<p><span class="submit">J'essaie gratuitement<br>30 jours</span></p>