Question

如何使用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;" />

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

我可以静态修复长度，宽度或其他值：因为控件不会改变。

Answer 1

white-space: normal;

应该有效

Answer 2

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

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

Answer 3

您可以使用按钮标记

＆LT;按钮＆GT;我看到这个＆lt; br /＆gt;是一个很长的＆lt; br /＆gt;句子。此处＆lt; /按钮＆GT;

Answer 4

对于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代码。它更具语义，更易于阅读，并且具有更大的灵活性 - 例如，允许在其中使用中断和其他元素（如图像！）。

只需要一些专业的网页开发人员的知识和一些建议......：）

Answer 5

在我的项目中，我遇到了跨类型的要求，我解决了下面的问题。

使用html编码字符串

<input button type="submit" value="This is button 
 two line text" />




用于分割按钮标记

的value属性中的文本

希望这会对你有帮助..

Answer 6

只需在值的中间按Enter键，如下所示：

我

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

6 个答案: