如何用固定宽度包装 HTML 按钮的文本？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/862010/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to wrap text of HTML button with fixed width?
提问by Peter
I just noticed that if you give an HTML button a fixed width, the text inside the button is never wrapped. I've tried it with word-wrap, but that cuts of the word even though there are spaces available to wrap on.
我刚刚注意到，如果你给一个 HTML 按钮一个固定的宽度，按钮内的文本永远不会被换行。我已经尝试过自动换行，但是即使有空格可以换行，也会削减单词。
How can I make the text of an HTML button with a fixed width wrap like any tablecell would?
如何使 HTML 按钮的文本像任何表格单元一样具有固定宽度的换行？
<td class="category_column">
<input type="submit" name="ctl00$ContentPlaceHolder1$DataList1$ctl12$ProCat_NameButton" value="Roos Sturingen / Sensors" id="ctl00_ContentPlaceHolder1_DataList1_ctl12_ProCat_NameButton" class="outset" style="height:118px;width:200px;font-size:18px;color:#7F7F7F;width:200px;white-space:pre;"
/>
</td>The CSS classes do nothing but adding borders and modify the padding.
If I add word-wrap:break-wordto this button, it will wrap it like this:
CSS 类除了添加边框和修改填充之外什么都不做。如果我添加word-wrap:break-word到这个按钮，它会像这样包装它：
Roos Sturingen / Sen
sors
And I don't want it to cut of in the middle of a word if it is possible to cut it off between words.
如果可以在单词之间切断它，我不希望它在单词中间被切断。
回答by Siu
I found that you can make use of the white-space CSS property:
我发现您可以使用 white-space CSS 属性：
white-space: normal;
And it will break the words as normal text.
它会将单词分解为普通文本。
回答by Richard
white-space: normal;
word-wrap: break-word;
Mine works with both
我的两者都适用
回答by Brian Nixon
You can force it (browser permitting, I imagine) by inserting line breaks in the HTML source, like this:
您可以通过在 HTML 源代码中插入换行符来强制它（浏览器允许，我想），如下所示：
<INPUT value="Line 1
Line 2">
Of course working out where to place the line breaks is not necessarily trivial...
当然，确定在哪里放置换行符不一定是微不足道的......
If you can use an HTML <BUTTON>instead of an <INPUT>, such that the button label is the element's content rather than its valueattribute, placing that content inside a <SPAN>with a widthattribute that is a few pixels narrower than that of the button seems to do the trick (even in IE6 :-).
如果您可以使用 HTML<BUTTON>而不是<INPUT>，这样按钮标签就是元素的内容而不是它的value属性，将该内容放置在<SPAN>具有width比按钮窄几个像素的属性的 a 中似乎可以解决问题（即使在 IE6 中:-)。
回答by Nick Saemenes
I have found that a button works, but that you'll want to add style="height: 100%;"to the button so that it will show more than the first line on Safari for iPhone iOS 5.1.1
我发现一个按钮可以工作，但是您需要添加style="height: 100%;"到该按钮中，以便它在 iPhone iOS 5.1.1 的 Safari 上显示的内容多于第一行
回答by Bhavani Raju
white-space: normal;
word-wrap: break-word;
"Both" worked for me.
“两者”都对我有用。
回答by Daan
Multi-line buttons like that are not really trivial to implement. This pagehas an interesting (though somewhat dated) discussion on the subject. Your best bet would probably be to either drop the multi-line requirement or to create a custom button using e.g. divs and CSS, and adding some JavaScript to make it work as a button.
像这样的多行按钮实现起来并不容易。这个页面有一个有趣的（虽然有些过时）关于这个主题的讨论。您最好的选择可能是放弃多行要求或使用例如divs 和 CSS创建自定义按钮，并添加一些 JavaScript 使其作为按钮工作。
回答by S.Yadav
If we have some inner divisions inside <button>tag like this-
如果我们在<button>标签内部有一些像这样的内部划分 -
<button class="top-container">
<div class="classA">
<div class="classB">
puts " some text to get print."
</div>
</div>
<div class="class1">
<div class="class2">
puts " some text to get print."
</div>
</div>
</button>
Sometime Text of class A get overlap on class1 data because these both are in a single button tag. I try to break the tex using-
有时 A 类的文本会与 class1 数据重叠，因为它们都在一个按钮标签中。我尝试使用 -
word-wrap: break-word; /* All browsers since IE 5.5+ */
overflow-wrap: break-word; /* Renamed property in CSS3 draft spec */
But this won't worked then I try this-
但这行不通然后我试试这个-
white-space: normal;
after removing above css properties and got my task done.
删除上述 css 属性并完成我的任务后。
Hope will work for all !!!
希望对大家有用！！！
回答by Juubes
word-wrap: break-word;
worked for me.
为我工作。
