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

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

您可以使用按钮标记

<button>我看到这是一个很长的句子.</ button>

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标签.它更具语义,更易于阅读,并且具有更大的灵活性 - 例如,允许在其中使用中断和其他元素(如图像!).

只需要一些专业的Web开发人员的知识和一些建议...... :)