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

我只是注意到，如果你给一个HTML按钮一个固定的宽度，按钮内的文本永远不会被包装。我已经尝试过用换行符来换行，但是即使有空间可以换行，也会减少单词的长度

如何使HTML按钮的文本像任何tablecell一样具有固定宽度的换行符

像这样的多行按钮其实并不容易实现。对这个问题进行了有趣的（尽管有些过时）讨论。您的最佳选择可能是放弃多行要求，或者使用例如

div

s和CSS创建自定义按钮，并添加一些JavaScript使其作为按钮工作

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

空白：正常；

它会将这些单词作为普通文本进行打断。

您可以通过在HTML源代码中插入换行符来强制执行它（我想是浏览器允许的），如下所示：

<INPUT value="Line 1
Line 2">

当然，确定换行符的位置不一定很简单

---

如果您可以使用HTML

而不是

，这样按钮标签就是元素的内容而不是它的

值

属性，那么将该内容放在

中，并且

宽度

属性比按钮的宽度窄几个像素，似乎就可以实现这一目的（即使在IE6:-）.

我发现一个按钮可以工作，但您需要在按钮上添加

style=“height:100%”“

，这样它就可以显示iPhone iOS 5.1.1 Safari上的第一行以外的内容

word-wrap: break-word;

---

为我工作。

如果我们在

标签中有一些内部分区，就像这样-

<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>

但这不管用，那我就试试这个-

white-space: normal;

删除以上css属性并完成任务后

希望对所有人都有用

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

我的工作与这两个

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

---

“两者”都适用于我。

问题是我使用的是ASP.Net，使用的是带有CommandName和CommandArgument属性的ASP:button控件。我不能只使用其他控件。对于一些非常简单的控件，您也可以在所需的断点处使用
。用于工作，但在最新版本的Chrome中不再工作。这与answer有何不同？如果您注意到，我已将其与button tag一起使用。按钮中不允许使用div，它不是正确的HTML。@MGOwen现在没事了-我们同时使IE6失效。其他答案建议

wordwrap:break word对我不起作用，但这确实起作用。
   white-space: normal;
   word-wrap: break-word;