14

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 ?

5 Answers 5

14

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

11

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

3

I think you try this in HTML:

Just as example help for you:

<input type="button" value="Really&#x00A;Tall&#x00A; Button">

2

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.

0
1

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>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.