Html 如何在提交输入中添加换行符
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/36982789/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to add a line break into a submit input
提问by user1841787
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 :
我正在寻找一种方法来显示<input type="submit">2 行的值
，因此可能会在其中添加换行符，但我尝试了多种方法，例如：
<br>\r\n\n
<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 ?
什么都行不通。任何人都对此有所了解？
采纳答案by Kruskaal
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.
我只是添加了一些 CSS 来保持按钮的大小。和换行不是一个很好的做法。你最好用css来做。
回答by beerwin
Use buttoninstead of input:
使用button代替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>.
按钮内部可以接受各种其他标签，例如<br />, <span>。
Then, you can style it with CSS however you wish (see the CSS class and rules in the code snippet).
然后，您可以随意使用 CSS 设置样式（请参阅代码片段中的 CSS 类和规则）。
回答by Shubham Khatri
Add this to your css: A white-space property will allow to have input in multiple lines
将此添加到您的 css：空白属性将允许在多行中输入
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
然而，最后一种方法在 IE10 中不起作用
回答by Jainam
I think you try this in HTML:
我想你在 HTML 中试试这个：
Just as example help for you:
就像对您的帮助示例：
<input type="button" value="Really
Tall
 Button">回答by PinkTurtle
Alternatively, use a standard <a>or <span>tag.
或者，使用标准<a>或<span>标签。
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>