如何用固定宽度包装 HTML 按钮的文本? [英] How to wrap text of HTML button with fixed width?
问题描述
我刚刚注意到,如果你给一个 HTML 按钮一个固定的宽度,按钮内的文本永远不会被换行.我已经尝试过自动换行,但即使有空格可以换行,也会删减单词.
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?
<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>
CSS 类除了添加边框和修改填充之外什么都不做.如果我添加 word-wrap:break-word
到这个按钮,它会像这样包装它:
The CSS classes do nothing but adding borders and modify the padding.
If I add word-wrap:break-word
to this button, it will wrap it like this:
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.
推荐答案
我发现你可以使用 white-space CSS 属性:
I found that you can make use of the white-space CSS property:
white-space: normal;
它会将单词分解为普通文本.
And it will break the words as normal text.
这篇关于如何用固定宽度包装 HTML 按钮的文本?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!