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

时间:2016-05-02 12:44:25

标签: html css

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

  • <br>
  • \r\n
  • \n
  • &#10;

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

the result

没有任何作用。有人知道这个吗?

5 个答案:

答案 0 :(得分:10)

使用refreshGrids代替button

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

按钮可以接受其中的各种其他标签,例如<button type="submit" class="right-aligned">Text <br /> broken </button><br />

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

答案 1 :(得分:7)

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

&#13;
&#13;
input[type="submit"] {
    white-space: normal;
    width: 150px;
    float:right;
    text-align: right;
}
&#13;
<input type="submit" value="J'essaie gratuitement 30 jours" />
&#13;
&#13;
&#13;

另外两种方法

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

在输入值之间使用&#13;&#10;回车符:

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

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

答案 2 :(得分:3)

我想你在HTML中尝试这个:

正如您的示例帮助:

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

答案 3 :(得分:2)

这对我有用:

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

答案 4 :(得分:0)

或者,使用标准<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>