对于较新版本的chrome,使用两行文本创建输入类型="按钮"

Question

如果有人能解释原因,我会接受"不可能"的回答.但是,除了使用a的答案之外,我不会这样做,<button>因为这不是这个问题所要求的.

我正在尝试使用两行单词创建一个输入按钮,但是较新版本的chrome不会让我,这是我尝试过的:

回车分离器

    <input type="button" value="Line One&#13;&#10;Line Two"/>

    <input type="button" value="Line One\r\nLine Two">

我知道你可以使用,white-space: normal;但这不会让你<br>在任何你想要的地方.

input[type="submit"] {
    white-space: normal;
}

有没有办法可以在我选择的按钮中添加新行？

即

第一行

第二行

Answer 1

虽然我无法证明这是不可能的,但尝试使input按钮占用多行并不是一个好主意.首先,HTML5规范仅对此value属性说:

如果元素具有value属性,则按钮的标签必须是该属性的值

请注意,"按钮的标签"未在规范中的任何位置定义.这意味着由浏览器供应商选择如何解释它,这也意味着他们可以随意改变他们的解释.

您刚刚目睹Chrome团队决定进行此类更改.它可能会在另一个浏览器中再次发生.因此,您现在找到的任何解决方案都不会是永久性的,并且受浏览器供应商的影响.

这就是为什么我强烈建议使用该<button>元素.因为规范保证允许您进行HTML格式化,例如换行符.

Answer 2

@aardrian指出了正确的方向,你还必须设置-webkit-appearance为none删除输入的特定样式.

CSS

input {
  white-space: normal;
  width: 50px;
  -webkit-appearance: none;

  background: #ddd;
  border: none;
}

HTML

<input type="submit" value="Text1 Text2 Text3 Text4" />

您可以更改宽度以允许每行中包含更多单词.

Codepen:http://codepen.io/anon/pen/xOExpX

似乎没有办法在值中添加html,值值始终被清理:

value content属性给出input元素的默认值.当添加,设置或删除值内容属性时,如果控件的脏值标志为false,则用户代理必须将元素的值设置为值content属性的值(如果有)或空字符串否则,然后运行当前值清理算法(如果已定义).