如何用固定宽度来包装htmlbutton的文本

我只是注意到,如果你给一个htmlbutton一个固定的宽度,button内的文本永远不会被包装。 我已经尝试过使用单词换行,但即使有可用的空间来包装这个词的削减。

我怎样才能使一个固定宽度的HTML包装像任何tablecell的文本将?

<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类什么都不做,只是添加边框并修改填充。 如果我在这个button上添加word-wrap:break-word,它会像这样包装它:

 Roos Sturingen / Sen sors 

如果有可能在单词之间切断,我不希望它在一个词的中间被切断。

谢谢

我发现你可以使用空白的CSS属性:

 white-space: normal; 

它会打破正常文本的话。

希望它有帮助。

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

 <INPUT value="Line 1 Line 2"> 

当然,在哪里设置换行符并不一定是微不足道的…

如果您可以使用HTML <BUTTON>而不是<INPUT> ,以便button标签是元素的内容而不是其value属性,则将该内容放置在<SPAN> ,其width属性比像素窄几个像素button的似乎做伎俩(即使在IE6 :-)。

我发现一个button的作品,但你会想要添加style="height: 100%;" 到该button,以便它将显示超过iPhone的iOS 5.1.1 Safari的第一行

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

我的工作与两个

像这样的多行button并不是很简单的实现。 这个网页有一个有趣的(虽然有点过时)讨论这个问题。 你最好的select可能是放弃多行要求,或者使用例如div和CSS创build一个自定义button,并添加一些JavaScript来使它成为一个button。

 word-wrap: break-word; 

为我工作。

如果我们在<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> 

有时,类A的文本在类1数据上重叠,因为这两者都在单个button标记中。 我试图打破tex使用 –

  word-wrap: break-word; /* All browsers since IE 5.5+ */ overflow-wrap: break-word; /* Renamed property in CSS3 draft spec */ 

但是,这不会奏效然后我尝试这个 –

 white-space: normal; 

删除以上的CSS属性,并完成我的任务。

希望将为所有工作!