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

Question

我正在寻找一种方法来显示<input type="submit"> 2行的值 ,所以可能在其中添加换行符,但我尝试了多种东西,例如:

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


结果应该是这样的(在图片的右侧):

什么都行不通.有人知道这个吗？

Answer 1

使用button而不是input:

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

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

按钮可以接受多种内的其他标记,如<br />,<span>.

然后,您可以根据需要使用CSS设置样式(请参阅代码片段中的CSS类和规则).

Answer 2

将此添加到您的css:一个空白属性将允许多行输入

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中不起作用

Answer 3

这对我有用：

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来做。