231

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

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

4

8 回答 8

631

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

white-space: normal;

它会将单词破坏为普通文本。

于 2009-07-28T14:54:45.193 回答
29 
white-space: normal;
word-wrap: break-word;

我的两者都适用

于 2017-08-18T00:17:17.077 回答
8

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

<INPUT value="Line 1
Line 2">

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

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

于 2010-04-04T14:36:17.943 回答
6

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

于 2012-07-11T21:15:16.773 回答
5 
   white-space: normal;
   word-wrap: break-word;

“两者”都为我工作。

于 2018-04-17T08:12:06.603 回答
2

像这样的多行按钮实现起来并不简单。这个页面有一个关于这个主题的有趣（虽然有些过时）的讨论。您最好的选择可能是放弃多行要求或使用例如divs 和 CSS 创建自定义按钮，并添加一些 JavaScript 以使其作为按钮工作。

于 2009-05-14T08:22:35.477 回答
2

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

希望对所有人有用！！！

于 2017-02-22T09:32:01.177 回答
1 
word-wrap: break-word;

为我工作。

于 2016-11-26T19:34:35.297 回答