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 ?
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).
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><a href="#" title="Clickie" class="submit">J'essaie gratuitement<br>30 jours</a></p>
<p><span class="submit">J'essaie gratuitement<br>30 jours</span></p>
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
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With