Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to add a line break into a submit input

Tags:

html

css

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
  • &#10;

The result should be like this (On the right side of the picture) :

the result

Nothing works. Anyone got a clue on this ?

like image 366
user1841787 Avatar asked May 02 '16 12:05

user1841787


4 Answers

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

like image 139
beerwin Avatar answered Oct 09 '22 09:10

beerwin


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>
like image 37
PinkTurtle Avatar answered Oct 09 '22 08:10

PinkTurtle


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 &#13;&#10; carriage return in between the input value as:

<input type="button" value="Multiple line&#13;&#10;input" style="text-align:center;">

The last method however doesn't work in IE10

like image 29
Shubham Khatri Avatar answered Oct 09 '22 09:10

Shubham Khatri


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.

like image 45
Kruskaal Avatar answered Oct 09 '22 07:10

Kruskaal