将 HTML 输入按钮的文本值包装在多行上
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13048499/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Wrapping an HTML input button's text value over multiple lines
提问by RMN
How do I move text to a new line in an HTML input element with the type="button"attribute?
如何将文本移动到具有该type="button"属性的 HTML 输入元素中的新行？
I have following code:
我有以下代码：
<input type="button" id="btnTexWrapped" value="I see this is a long sentence here." style="width: 200px;" />
I want the button's text value to be wrapped in two lines. I tried typing it into the next line in HTML. It didn't work as I expected:
我希望按钮的文本值包含在两行中。我尝试将其输入到 HTML 的下一行。它没有按我预期的那样工作：
<input type="button" id="btnTexWrapped" value="I see this is a long
sentence here." style="width: 200px;" />
I also tried using all options of white-spacewith fixed width: 200px;, but still nothing works.
我也尝试使用white-spacewith fixed 的所有选项width: 200px;，但仍然没有任何效果。
I am OK with statically fixing the length, width, or other values: as the control is not going to change.
我可以静态固定长度、宽度或其他值：因为控件不会改变。
回答by Marián Zeke ?edaj
white-space: normal;
should work
应该管用
回答by daniel
Try this, you can see how it works instantly:
试试这个，你可以立即看到它是如何工作的：
<input type="button" value="Carriage return separators" style="text-align:center;">
回答by Lokesh
You can use button tag
您可以使用按钮标签
<button> I see this <br/>is a long <br/> sentence here.</button>
<button> 我看到这个<br/>是一个很长的<br/>句子。</button>
回答by corinnaerin
For anyone reading this question 4 years later, I would like to add some clarifying details. Lokesh's answer is the correct one (notthe accepted answer), but the initial question is based on a misunderstanding of how HTML works, which no one has addressed.
对于 4 年后阅读此问题的任何人，我想添加一些澄清细节。Lokesh 的答案是正确的（不是公认的答案），但最初的问题是基于对 HTML 工作原理的误解，而没有人解决过这个问题。
HTML is not a white-space significant language. That is, any new lines are completely ignored by the browser. While you can (and should!) put new lines in your HTML code in order to write readable, maintainable HTML, it will (almost) never affect the end result (I won't get into exceptions here).
HTML 不是空白重要的语言。也就是说，浏览器会完全忽略任何新行。虽然您可以（并且应该！）在 HTML 代码中添加新行以编写可读、可维护的 HTML，但它（几乎）永远不会影响最终结果（我不会在这里讨论异常）。
As Lokesh indicated, you can use the <br />tag to force a new line. Another common way is to use block level elements, such as divor section.
正如 Lokesh 所指出的，您可以使用该<br />标签来强制换行。另一种常用方法是使用块级元素，例如div或section。
A number of elements are set to block by the browser UA stylesheet. They are usually container elements, like
<div>,<section>, and<ul>. Also text "blocks" like<p>and<h1>. Block level elements do not sit inline but break past them. By default (without setting a width) they take up as much horizontal space as they can.
许多元素被浏览器 UA 样式表设置为阻止。他们通常是容器元素，如
<div>，<section>和<ul>。还有像<p>和这样的文本“块”<h1>。块级元素不是内联而是突破它们。默认情况下（不设置宽度），它们会尽可能多地占用水平空间。
This is a quote from https://css-tricks.com/almanac/properties/d/display/, which is a very good reference on the different properties for the displayattribute.
这是来自https://css-tricks.com/almanac/properties/d/display/的引述，它是关于display属性不同属性的非常好的参考。
Additionally, I don't recommend trying to use any of the other suggested solutions which require putting encoded newline symbols inside the valueattribute. This is pushing the inputtag beyond was it was designed for. If you need more complex content for a button, the buttontag is more appropriate. In fact, I generally don't think there's ever good reason to use <input type="button">instead the buttontag. It's much more semantic, easier to read, and is infinitely more flexible - for example, in allowing breaks and other elements (such as images!) inside it.
此外，我不建议尝试使用任何其他建议的解决方案，这些解决方案需要将编码的换行符放入value属性中。这将input标签推向了设计的范围之外。如果按钮需要更复杂的内容，button标签更合适。事实上，我通常认为没有充分的理由使用标签来<input type="button">代替button。它更具语义，更易于阅读，并且更加灵活 - 例如，允许在其中包含中断和其他元素（例如图像！）。
Just a bit of knowledge and a few recommendations from a professional web developer... :)
只是一点知识和专业网络开发人员的一些建议...... :)
回答by Skomma
I had come cross type of requirement in my one of the project,i resolved like given below.
我在我的一个项目中遇到了跨类型的需求，我解决了如下所示。
use html encoding string
使用html编码字符串
<input button type="submit" value="This is button 
 two line text" />
<input button type="submit" value="This is button 
 two line text" />




for splitting the text in value attribute of the button tag
用于拆分按钮标签的 value 属性中的文本
Hope this will help you..
希望能帮到你..
回答by Abdallah Barghouti
Just press enter in the middle of the value, like this:
只需在值的中间按 Enter 键，如下所示：
I
一世
