包装多行的HTML输入按钮的文本价值(Wrapping an HTML input button&#

2019-07-02 12:14发布

如何移动文本到新行与一个HTML输入元素type="button"属性?

我有下面的代码:

<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:

试试这个,你可以看到它是如何工作的瞬间:

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


Answer 2:

white-space: normal;

应该管用



Answer 3:

您可以使用按钮标签

<按钮>我看到这<BR/>是一个长期的<BR/>句话在这里。</按钮>



Answer 4:

对于任何人4年之后阅读这个问题,我想补充一些细节澄清。 LOKESH的答案是正确的( 接受的答案),但最初的问题是基于HTML如何工作的误解,这是任何人已经解决了。

HTML是不是一个空白显著语言。 也就是说,任何新线由浏览器完全忽略。 虽然你可以(也应该!)把新生产线在你的HTML代码,以写可读,可维护的HTML,它会(几乎)从来没有影响最终结果(我不会进入这里的例外)。

作为LOKESH指出,你可以使用<br />标签强制新生产线。 另一种常见的方法是使用块级元素,诸如divsection

一些元件被设置由浏览器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 &#x00A; two line text" />

&#x00A;

在按钮标记的价值属性拆分文本

希望对你有帮助..



Answer 6:

只需按下在值的中间进入,就像这样:

一世



文章来源: Wrapping an HTML input button's text value over multiple lines