如何在提交输入框中添加换行符

Question

我正在寻找一种方法，在两行中显示一个 <input type="submit"> 的值，因此可能会在其中添加一个换行符，但我尝试了多种方法，例如：

• <br>
• \r\n
• \n
• 


结果应该像这样（图片右侧）:

没有任何作用。 有人对此有什么线索吗？

- user1841787

Answer 1

将以下内容添加到你的css样式表中： white-space属性可以让输入框支持多行文本。

input[type="submit"] {
    white-space: normal;
    width: 150px;
    float:right;
    text-align: right;
}

<input type="submit" value="J'essaie gratuitement 30 jours" />

另外还有两种方法：

<button type="submit">Multiple line<br/>input</button>

并且

在输入值之间使用
回车符：

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

然而，最后一种方法在IE10中不起作用。

- Shubham Khatri

Answer 2

使用 button 代替 input:

.right-aligned {
  text-align: right;
}

<button type="submit" class="right-aligned">Text <br /> broken </button>

按钮可以接受其他各种标签，例如<br />、<span>。

然后，您可以使用CSS按照自己的意愿对其进行样式设置（请参见代码片段中的CSS类和规则）。

- beerwin

Answer 3

我认为你可以在HTML中尝试这个：

这只是一个例子，帮助你理解：

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

- Jainam

Answer 4

这对我有用：

这是对我有效的：

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>

我刚刚添加了一些CSS来保持按钮的大小。而换行并不是一个很好的做法。最好使用CSS来处理。

- Kruskaal

Answer 5

或者，使用标准的或标签。

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>

- PinkTurtle