如何在固定宽度的HTML按钮中换行文本？

Question

我刚刚注意到，如果给HTML按钮设置了固定的宽度，按钮内部的文本将永远不会换行。我已经尝试使用word-wrap属性，但即使有可以进行换行的空格，它仍然会截断单词。

如何使具有固定宽度的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

我不希望在单词中间被截断，如果可以在单词之间截断，则最好。

- Peter

Answer 1

我发现你可以利用CSS的white-space属性：

white-space: normal;

而且它会像普通文本一样断开单词。

- Siu

---

@MGOwen 现在没问题了 - 我们同时消除了IE6。 - low_rents

其他建议使用 word-wrap: break-word; 的答案对我无效，但这个有效。 - F1Krazy

Answer 2

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

我的作品可以与两者一起使用。

- Richard

Answer 3

您可以通过在HTML源代码中插入换行（如果浏览器允许的话）来强制实现此功能，例如：

<INPUT value="Line 1
Line 2">

当然，确定换行位置并不是易事...

如果您可以使用HTML中的<BUTTON>代替<INPUT>，使按钮标签成为元素内容而不是其value属性，则将该内容放置在一个<SPAN>内，该<SPAN>的宽度比按钮窄几个像素似乎可以解决问题（即使在IE6中也可以）。

- Brian Nixon

---

对于非常简单的情况，您也可以在所需的断点处使用带有 <br> 的 <button>。 - KevinH

曾经可以使用，但在最近的Chrome版本中不再起作用。 - Joe Mabel

Answer 4

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

"Both"对我来说都起作用了。

- Bhavani Raju

Answer 5

我发现按钮可以使用，但是你需要在按钮上添加style="height: 100%;"属性，这样它才能在Safari for iPhone iOS 5.1.1上显示超过第一行的内容。

- Nick Saemenes

Answer 6

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

- Daan

---

问题在于我正在使用ASP.Net，使用asp:button控件和CommandName和CommandArgument属性。我不能只使用其他控件。 - Peter

Answer 7

如果我们在<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类文本会与class1数据重叠，因为它们都在同一个按钮标签中。我尝试使用“-”来分隔文本。

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

但是当我尝试这个时它不起作用-

white-space: normal;

在删除上述CSS属性后，我完成了我的任务。

希望这对所有人都有效！

- S.Yadav

---

这与这个答案有何不同？ - Christian Gollhardt

如果你注意到了，我已经在button标签中使用了它。 - S.Yadav

按钮内不允许使用div，这不是正确的HTML。 - Ian Devlin

Answer 8

word-wrap: break-word;

对我有用。

- Juubes

Answer 9

line-break: anywhere;

或者

word-break: break-all;

同样也是可能的。

- O. V.