如何用固定宽度包装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.

推荐答案

我发现您可以使用空白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屋！