html多行文本value,Wrapping an HTML input button's text value over multiple lines

For anyone reading this question 4 years later, I would like to add some clarifying details. Lokesh's answer is the correct one (not the accepted answer), but the initial question is based on a misunderstanding of how HTML works, which no one has addressed.

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).

As Lokesh indicated, you can use the
tag to force a new line. Another common way is to use block level elements, such as div or section.

A number of elements are set to block by the browser UA stylesheet. They are usually container elements, like

, , and
  • . Also text "blocks" like

and

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

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 display attribute.

Additionally, I don't recommend trying to use any of the other suggested solutions which require putting encoded newline symbols inside the value attribute. This is pushing the input tag beyond was it was designed for. If you need more complex content for a button, the button tag is more appropriate. In fact, I generally don't think there's ever good reason to use instead the button tag. 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.

Just a bit of knowledge and a few recommendations from a professional web developer... :)

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值