将 HTML 输入按钮的文本值包装在多行上答案

【问题标题】：Wrapping an HTML input button's text value over multiple lines将 HTML 输入按钮的文本值包装在多行上
【发布时间】：2012-10-14 10:49:13
【问题描述】：

如何将文本移动到具有type="button" 属性的 HTML 输入元素中的新行？

我有以下代码：

<input type="button" id="btnTexWrapped" value="I see this is a long sentence here." style="width: 200px;" />

我希望按钮的文本值包含在两行中。我尝试将它输入到 HTML 的下一行。它没有像我预期的那样工作：

<input type="button" id="btnTexWrapped" value="I see this is a long 
sentence here." style="width: 200px;" />

我还尝试使用固定width: 200px; 的white-space 的所有选项，但仍然没有任何效果。

我可以静态地固定长度、宽度或其他值：因为控件不会改变。

【问题讨论】：

尝试使用<button></button>标签。
当我尝试使用（在 Chrome v38.0 中）

标签： html button input word-wrap

【解决方案1】：

试试这个，你可以立即看到它是如何工作的：

<input type="button" value="Carriage&#13;&#10;return&#13;&#10;separators" style="text-align:center;">

【讨论】：

不再在 Chrome 中工作（至少从版本 48 开始）

【解决方案2】：

white-space: normal;

应该工作

【讨论】：

这不再适用于 chrome（截至 48.0.2564.97 m）
@RMN 这应该是默认答案。作品

【解决方案3】：

只需在值的中间按回车，如下所示：

<input type="button" id="btnTexWrapped" value="I see this is a long 
sentence here." style="width:200px;"/>

我

【讨论】：

【解决方案4】：

你可以使用按钮标签

【讨论】：

请注意，这在 Safari 中无法正常工作。见stackoverflow.com/questions/67933568

【解决方案5】：

我在我的一个项目中遇到了不同类型的需求，我解决了如下问题。

使用html编码字符串

<input button type="submit" value="This is button &#x00A; two line text" />

&#x00A;

用于拆分按钮标签的value属性中的文本

希望对你有所帮助..

【讨论】：

【解决方案6】：

对于 4 年后阅读此问题的任何人，我想添加一些澄清细节。 Lokesh 的答案是正确的（不是公认的答案），但最初的问题是基于对 HTML 工作原理的误解，没有人解决这个问题。

HTML 不是一种重要的空白语言。也就是说，浏览器会完全忽略任何新行。虽然您可以（并且应该！）在 HTML 代码中添加新行以编写可读、可维护的 HTML，但它（几乎）不会影响最终结果（我不会在这里讨论例外情况）。

正如 Lokesh 所指出的，您可以使用 <br /> 标签强制换行。另一种常见的方法是使用块级元素，例如div 或section。

浏览器 UA 样式表将许多元素设置为阻止。它们通常是容器元素，例如<div>、<section> 和<ul>。也像<p>和<h1>这样的文本“块”。块级元素不是内联的，而是突破它们。默认情况下（不设置宽度），它们会尽可能多地占用水平空间。

这是来自https://css-tricks.com/almanac/properties/d/display/ 的引用，这是关于display 属性的不同属性的非常好的参考。

此外，我不建议尝试使用任何其他建议的解决方案，这些解决方案需要将编码的换行符放入 value 属性中。这将input 标签推到了设计的范围之外。如果您需要更复杂的按钮内容，button 标签更合适。事实上，我通常认为没有充分的理由使用<input type="button"> 代替button 标签。它更具语义性、更易于阅读并且无限灵活 - 例如，允许在其中包含中断和其他元素（例如图像！）。

专业网络开发人员提供的一些知识和一些建议... :)

【讨论】：

完全同意你的看法。但是，如果我需要<input type="submit" 怎么办？将其替换为<button> 并编写自定义逻辑以提交表单，因为 single 换行符......哦，我认为它过于工程化了。
我不明白使用<button> 标签可能会被称为过度工程。没有额外的（更不用说自定义）逻辑来使按钮工作......您只需使用<button type="submit">，它就可以开箱即用。事实上，最好使用 HTML5 元素，例如 button 而不是 input。在此处查看 MDN 上的注释部分：developer.mozilla.org/en-US/docs/Web/HTML/Element/button#Notes
感谢<button type="submit">！
请注意，这在 Safari 中无法正常工作。见stackoverflow.com/questions/67933568