如何用固定宽度换行 HTML 按钮的文本？答案

【问题标题】：How to wrap text of HTML button with fixed width?如何用固定宽度换行 HTML 按钮的文本？
【发布时间】：2010-10-26 02:37:39
【问题描述】：

我刚刚注意到，如果您为 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

如果可以在单词之间截断，我不希望它在单词中间截断。

【问题讨论】：

标签： html css button word-wrap

【解决方案1】：

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

【讨论】：

问题是我正在使用 ASP.Net，使用带有 CommandName 和 CommandArgument 属性的 asp:button 控件。我不能只使用其他控件。

【解决方案2】：

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

white-space: normal;

它会将单词分解为普通文本。

【讨论】：

@MGOwen 现在没关系 - 我们同时关闭了 IE6。
建议word-wrap: break-word; 的其他答案对我不起作用，但确实如此。

【解决方案3】：

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

<INPUT value="Line 1
Line 2">

当然，确定在哪里放置换行符并不一定是微不足道的......

如果您可以使用 HTML <BUTTON> 而不是 <INPUT>，这样按钮标签是元素的内容而不是其 value 属性，则将该内容放在具有 width 属性的 <SPAN> 中比按钮窄几个像素似乎可以解决问题（即使在 IE6 中 :-)。

【讨论】：

对于一些非常简单的事情，您还可以在所需的断点处使用
以前可以工作，但在最新版本的 Chrome 中不再工作。

【解决方案4】：

我发现一个按钮可以工作，但您需要将style="height: 100%;" 添加到该按钮，以便它在 iPhone iOS 5.1.1 的 Safari 上显示的比第一行更多

【讨论】：

【解决方案5】：

word-wrap: break-word;

为我工作。

【讨论】：

【解决方案6】：

如果我们在<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 数据上重叠，因为它们都在一个按钮标记中。我尝试使用 -

来打破 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 属性并完成我的任务之后。

希望对所有人有用！！！

【讨论】：

这与this 答案有何不同？
如果你注意到的话，我已经将它与按钮标签一起使用了。
按钮中不允许有 Div，这不是正确的 HTML。

【解决方案7】：

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

我的两者都适用

【讨论】：

【解决方案8】：

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

“两者”都对我有用。

【讨论】：