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

我只是注意到，如果为HTML按钮提供固定宽度，则按钮内的文本将永远不会被换行。我已经尝试过自动换行，但是即使有足够的空间可以换行，也可以减少单词的使用量。

如何像任何表格单元格一样，使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

而且我不希望在单词中间切掉它。

我发现您可以使用空白CSS属性：

white-space: normal;

它将把单词打断为普通文本。

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

我的都与

您可以通过在HTML源代码中插入换行符来强制这样做（在浏览器允许的情况下），如下所示：

<INPUT value="Line 1
Line 2">

当然，找出在何处放置换行符并不一定很简单。

如果您可以使用HTML <BUTTON>而不是HTML <INPUT>，例如，按钮标签是元素的内容而不是元素的value属性，则可以将内容放置在属性中，<SPAN>该width属性的宽度比按钮的像素窄几像素（即使在IE6中：-)。

我发现按钮可以使用，但您需要将其添加style="height: 100%;"到按钮上，以使其显示的内容比Safari for iPhone iOS 5.1.1上的第一行还要多。

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

“两者”都为我工作。

像这样的多行按钮并不是很容易实现。本页对此主题进行了有趣的（尽管有些过时）讨论。最好的选择可能是放弃多行要求，或者使用例如divs和CSS 创建自定义按钮，并添加一些JavaScript以使其像按钮一样工作。

如果我们在<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数据上重叠，因为它们都在单个按钮标签中。我尝试使用-破坏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属性并完成我的任务后。

希望能为所有人服务！

word-wrap: break-word;

为我工作。