Question

如果有人可以解释原因，我会接受“不可能”的回答。但是，除了使用<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 spec仅对value属性说明了这一点：

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

请注意＆＃34;按钮的标签＆＃34;未在规范中的任何位置定义。这意味着浏览器供应商应该选择如何解释它，这也意味着他们可以随意改变他们的解释。

您刚刚目睹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 值始终被清理：

value content属性给出输入的默认值元件。添加，设置或删除值内容属性时，如果控件的脏值标志为false，则必须设置用户代理元素的值与value content属性的值，如果有一个，否则为空字符串，然后运行当前值清理算法，如果定义了一个。

信息：https://www.w3.org/TR/html5/forms.html#attr-input-value

Answer 3

改为使用<button type=submit>。

<button type=submit>First line<br>Second line</button>

Answer 4

哈克：

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

宽度应对应于最长的单词。这不允许任意换行。

更好的解决方案：使用<button>。

Answer 5

据我所知，用输入实现你想要的东西是不可能的。属性＆＃34;值＆＃34;将内部的所有内容视为要打印到屏幕上的字符串。因此，任何<br />标记都将被视为文本，不会呈现为HTML。它不接受任何转义字符。

您最好的选择是使用按钮作为c-smile建议，或者您可以创建一个div，根据自己的喜好设置样式并在点击时添加一个javascript，这将导致表单提交。

或者，如果你坚信你必须使用输入，你可以做一些javascript（这只是你不知道宽度未知的单词）。

为了记录，我强烈建议您只使用一个按钮，以下是您的操作方法：

https://jsfiddle.net/bdLanac5/1/

＆＃13;

 var inputValue = $("#myInput").val();
    var inputValues = inputValue.split(" ");
    var longestValue = inputValues.reduce(function (a, b) { return a.length > b.length ? a : b; });
    
    $("#myInput").val(longestValue);
    var length = $("#myInput").outerWidth();
    $("#myInput").css("width", length);
    $("#myInput").val(inputValue);

＆＃13;

    input{
      white-space: normal;
    }

＆＃13;

<input id="myInput" type="submit" value="This is a test"/>

＆＃13;

如果你知道宽度，那么删除javascript并在css上添加宽度到你的输入元素。

Answer 6

这可能有用吗？不完全是你问的，我知道......

（~~注意字体差异~~因为我得到了一些upvotes我处理了字体问题）

＆＃13;

class Record(MyAbstractModel):
    pass

＆＃13;

input{
  font-family:inherit;
  font-size:inherit;
}
#line1{
  padding-bottom: 25px; 
  padding-left:5px;
  text-align:left;
  width:75px;/*Depends on the second line lengh*/
}
#line2{ 
  margin-top: -23px; 
  padding-left:7px;  
}

＆＃13;

Answer 7

有点像黑客，但你可以使用常规空间，你想让线条断裂，而不是你不在的地方 - 然后只需确保宽度设置为正确容纳它。

jsfiddle

＆＃13;

    input{
     white-space: normal;
     width: 110px;
    }

＆＃13;

<input type="button" value="Text1&#160;Text2&#160;Text3 Text4" />

＆＃13;

Answer 8

<input id="myInput" type="submit" value="Line OneLine Two"/>

input{
  white-space: normal;
  word-break: break-all;
}

#myInput{
  width:73px;
}

您可以将自己的宽度设为按钮。

创建输入类型=“按钮”，其中包含两行文本，用于较新版本的Chrome

8 个答案: