如何用固定宽度包装html按钮的文本

Question

我只是注意到,如果你给一个固定宽度的html按钮,按钮内的文本永远不会被包装.我已经尝试过自动换行,但即使有可用的空间,也可以剪掉这个词.

如何使用像任何tablecell一样的固定宽度换行的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>

除了添加边框和修改填充之外,css类什么都不做.如果我将word-wrap:break-word添加到此按钮,它将像这样包装:

Roos Sturingen / Sen
sors

如果可以在单词之间切断它,我不希望它在一个单词的中间切割.

谢谢

Answer 1

我发现你可以使用white-space css属性:

white-space: normal;

它会将这些词语视为普通文本.

希望能帮助到你.

Answer 2

white-space: normal;
word-wrap: break-word;

我的两个都适用

Answer 3

您可以通过在HTML源代码中插入换行符来强制它(浏览器允许,我想),如下所示:

<INPUT value="Line 1
Line 2">

当然,找出换线的位置并不一定是微不足道的......

如果您可以使用HTML <BUTTON>而不是a <INPUT>,那么按钮标签是元素的内容而不是其value属性,将该内容放在<SPAN>具有width比按钮窄几个像素的属性的内容中似乎可以解决问题(甚至在IE6中:-).

Answer 4

我发现一个按钮有效,但是你想要添加style="height: 100%;"到按钮,这样它将显示比Safari for iOS iOS 5.1.1上的第一行更多

Answer 5

   white-space: normal;
   word-wrap: break-word;

“两者”都对我有用。