How do I move text to a new line in an HTML input element with the type="button" attribute?
如何使用type =“button”属性将文本移动到HTML输入元素中的新行?
I have following code:
我有以下代码:
<input type="button" id="btnTexWrapped" value="I see this is a long sentence here." style="width: 200px;" />
I want the button's text value to be wrapped in two lines. I tried typing it into the next line in HTML. It didn't work as I expected:
我希望按钮的文本值包含在两行中。我尝试将其键入HTML的下一行。它没有像我预期的那样工作:
<input type="button" id="btnTexWrapped" value="I see this is a long
sentence here." style="width: 200px;" />
I also tried using all options of white-space with fixed width: 200px;, but still nothing works.
我也尝试使用固定宽度的所有白色空间选项:200px;,但仍然无效。
I am OK with statically fixing the length, width, or other values: as the control is not going to change.
我可以静态修复长度,宽度或其他值:因为控件不会改变。
6 个解决方案
#1
16
Try this, you can see how it works instantly:
试试这个,你可以看到它是如何立即工作的:
<input type="button" value="Carriage return separators" style="text-align:center;">
#2
20
white-space: normal;
should work
#3
13
You can use button tag
您可以使用按钮标记
<button> I see this <br/>is a long <br/> sentence here.</button>
#4
5
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.
对于4年后阅读此问题的人,我想补充一些澄清细节。 Lokesh的答案是正确答案(不是接受的答案),但最初的问题是基于对HTML如何工作的误解,这是没有人解决过的。
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).
HTML不是白空间重要语言。也就是说,浏览器完全忽略了任何新行。虽然您可以(并且应该!)在HTML代码中添加新行以编写可读,可维护的HTML,但它(几乎)永远不会影响最终结果(我不会在这里遇到异常)。
As Lokesh indicated, you can use the <br /> tag to force a new line. Another common way is to use block level elements, such as div or section.
正如Lokesh所指出的,你可以使用
标签强制换行。另一种常见方法是使用块级元素,例如div或section。
A number of elements are set to block by the browser UA stylesheet. They are usually container elements, like
<div>,<section>, and<ul>. Also text "blocks" like<p>and<h1>. 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.浏览器UA样式表将许多元素设置为阻止。它们通常是容器元素,如
,和 。同时发送文本“块”,如
和
。块级元素不是内嵌的,而是突破它们。默认情况下(不设置宽度),它们会占用尽可能多的水平空间。
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.
这是来自https://css-tricks.com/almanac/properties/d/display/的引用,这是对display属性的不同属性的非常好的参考。
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 <input type="button"> 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.
此外,我不建议尝试使用任何其他建议的解决方案,这些解决方案需要在value属性中放置编码的换行符号。这是推动输入标签超出其设计目标。如果按钮需要更复杂的内容,则按钮标记更合适。事实上,我通常认为没有充分的理由使用而不是按钮标签。它更加语义,更易于阅读,并且具有更大的灵活性 - 例如,允许在其中使用中断和其他元素(如图像!)。
Just a bit of knowledge and a few recommendations from a professional web developer... :)
只需要一些专业的Web开发人员的知识和一些建议...... :)
#5
2
I had come cross type of requirement in my one of the project,i resolved like given below.
我在我的一个项目中遇到了跨类型的要求,我解决了如下所示。
use html encoding string
使用html编码字符串
<input button type="submit" value="This is button 
 two line text" />


for splitting the text in value attribute of the button tag
用于拆分按钮标记的value属性中的文本
Hope this will help you..
希望对你有帮助..
#6
-12
Just press enter in the middle of the value, like this:
只需在值的中间按Enter键,如下所示:
I
#1
16
Try this, you can see how it works instantly:
试试这个,你可以看到它是如何立即工作的:
<input type="button" value="Carriage return separators" style="text-align:center;">
#2
20
white-space: normal;
should work
#3
13
You can use button tag
您可以使用按钮标记
<button> I see this <br/>is a long <br/> sentence here.</button>
#4
5
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.
对于4年后阅读此问题的人,我想补充一些澄清细节。 Lokesh的答案是正确答案(不是接受的答案),但最初的问题是基于对HTML如何工作的误解,这是没有人解决过的。
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).
HTML不是白空间重要语言。也就是说,浏览器完全忽略了任何新行。虽然您可以(并且应该!)在HTML代码中添加新行以编写可读,可维护的HTML,但它(几乎)永远不会影响最终结果(我不会在这里遇到异常)。
As Lokesh indicated, you can use the <br /> tag to force a new line. Another common way is to use block level elements, such as div or section.
正如Lokesh所指出的,你可以使用
标签强制换行。另一种常见方法是使用块级元素,例如div或section。
A number of elements are set to block by the browser UA stylesheet. They are usually container elements, like
<div>,<section>, and<ul>. Also text "blocks" like<p>and<h1>. 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.浏览器UA样式表将许多元素设置为阻止。它们通常是容器元素,如
,和 。同时发送文本“块”,如
和
。块级元素不是内嵌的,而是突破它们。默认情况下(不设置宽度),它们会占用尽可能多的水平空间。
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.
这是来自https://css-tricks.com/almanac/properties/d/display/的引用,这是对display属性的不同属性的非常好的参考。
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 <input type="button"> 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.
此外,我不建议尝试使用任何其他建议的解决方案,这些解决方案需要在value属性中放置编码的换行符号。这是推动输入标签超出其设计目标。如果按钮需要更复杂的内容,则按钮标记更合适。事实上,我通常认为没有充分的理由使用而不是按钮标签。它更加语义,更易于阅读,并且具有更大的灵活性 - 例如,允许在其中使用中断和其他元素(如图像!)。
Just a bit of knowledge and a few recommendations from a professional web developer... :)
只需要一些专业的Web开发人员的知识和一些建议...... :)
#5
2
I had come cross type of requirement in my one of the project,i resolved like given below.
我在我的一个项目中遇到了跨类型的要求,我解决了如下所示。
use html encoding string
使用html编码字符串
<input button type="submit" value="This is button 
 two line text" />


for splitting the text in value attribute of the button tag
用于拆分按钮标记的value属性中的文本
Hope this will help you..
希望对你有帮助..
#6
-12
Just press enter in the middle of the value, like this:
只需在值的中间按Enter键,如下所示:
I