为更新版本的chrome创建两行文本的输入类型= " button "

I will accept an answer of "not possible" if someone can explain why. However, I will not except an answer with using a <button> because that is not what this question is asking.

如果有人能解释为什么，我会接受“不可能”的回答。但是，除了使用

I am trying to make an input button with two lines of words, but the newer versions of chrome are not letting me, here is what I have tried:

我正在尝试用两行文字做一个输入按钮，但是更新版本的chrome不允许我这样做，以下是我尝试过的:

Carriage Return Separators

回车分隔符

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

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

I know you can use white-space: normal; but this will not let you <br> where you want it to.

我知道你可以用空格:正常;但是这不会让你在你想要的地方
。

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

Is there a way that I can add the new line in the button where I choose?

是否有办法在我选择的按钮中添加新的行?

i.e.

即。

line one

1号线

line two

两行

8 个解决方案

#1

Although I can't prove that it's not possible, it's not a good idea to try to make the input button take up multiple lines. First of all, the HTML5 spec says only this about the value attribute:

虽然我不能证明这是不可能的，但是让输入按钮占用多行并不是一个好主意。首先，HTML5规范只对value属性这么说:

If the element has a value attribute, the button's label must be the value of that attribute

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

Notice that "button's label" is not defined anywhere in the spec. That means it is up to browser vendors to choose how to interpret that, and it also means that they can change their interpretation at will.

请注意，“button's label”在规范中没有定义，这意味着浏览器厂商可以选择如何解释，这也意味着他们可以随意改变他们的解释。

You just witnessed the Chrome team deciding to make such a change. It could happen again, in another browser perhaps. So any solution you find now will not be permanent and subject to the whims of browser vendors.

你刚刚看到Chrome团队决定做出这样的改变。这种情况可能再次发生，也许是在其他浏览器中。因此，您现在找到的任何解决方案都不会是永久性的，并受制于浏览器供应商的奇思妙想。

That's why I strongly recommend using the <button> element. Because it is guaranteed by the spec to allow you to do HTML formatting, like line breaks.

这就是为什么我强烈推荐使用

#2

@aardrian has pointed the right direction, you also have to set -webkit-appearance as none to remove specific styling of the input.

@aardrian指出了正确的方向，您还必须将-webkit-appearance设置为none，以删除输入的特定样式。

CSS

CSS

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

  background: #ddd;
  border: none;
}

HTML

HTML

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

You can change the width to allow more words in each row.

您可以更改宽度，以便在每一行中允许更多的单词。

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

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

It's seems there's no way to add html inside the value, the value value is always sanitized:

似乎没有办法在值中添加html，值总是被消毒:

The value content attribute gives the default value of the input element. When the value content attribute is added, set, or removed, if the control's dirty value flag is false, the user agent must set the value of the element to the value of the value content attribute, if there is one, or the empty string otherwise, and then run the current value sanitization algorithm, if one is defined.

value content属性提供输入元素的默认值。添加内容属性值时,集,或删除,如果控制的脏国旗是错误的价值,用户代理必须将值设置元素的内容价值属性的值,如果有的话,或空字符串否则,杀毒软件,然后运行当前值算法,如果一个定义。

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

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

#3

Use <button type=submit> instead.

使用 <按钮类型=提交> 。

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

#4

Hack:

黑客:

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

The width should correspond to the longest word. This does not allow arbitrary line breaks.

宽度应该与最长的字对应。这不允许任意换行。

Better solution: use <button>.

更好的解决方案:使用 <按钮> 。

#5

To my understanding it is not possible to achieve what you wish with input. The attribute "value" will treat everything inside as a string that is to be printed out to the screen. So any <br /> tags will just get treated as text and will not be rendered as HTML. It does not accepts any escape characters.

按照我的理解，用投入来实现你的愿望是不可能的。属性“value”将把内部的一切都当作一个字符串，并将其打印到屏幕上。所以任何
标签都会被当作文本来处理，不会被渲染成HTML。它不接受任何转义字符。

Your best option is to use button as c-smile suggests or you can create a div, style it to your liking and add a javascript on click which will cause a form submission.

您最好的选择是按照c-smile的建议使用按钮，或者您可以创建一个div，根据您的喜好对其进行样式化，并在单击时添加一个javascript，这将导致表单提交。

Alternatively, if you strongly believe you have to use input you can do a bit of javascript (this is only if you don't know what the words are the width is unknown).

另外，如果您坚信您必须使用输入，那么您可以使用一些javascript(这只是在您不知道单词的宽度未知的情况下)。

For the record, I strongly advise just use a button, here is how you do it:

我强烈建议你只使用一个按钮，以下是你的做法:

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

 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);

    input{
      white-space: normal;
    }

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

If you know the width then remove the javascript and add width on css to your input element.

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

#6

Could this be useful? Not exactly what you asked, I know...

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

( ~~notice the font difference too~~ since I got a few upvotes I took care of the font issue)

(注意字体的差异，因为我得到了一些支持，所以我处理了字体问题)

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;  
}

<input type="button" value="Line One" id="line1"/>
<div id="line2">Line Two</div>

#7

Somewhat of a hack, but you could use regular spaces where you want the line to break, and nbsp where you don't - then just make sure the width is set to house it correctly.

有点像黑客，但是你可以使用常规的空间，你想让线断开，而你不需要的地方——然后确保宽度设置正确。

jsfiddle

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

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

#8

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

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

#myInput{
  width:73px;
}

You can give your own width to button.

你可以给按钮设置你自己的宽度。

#1