如何包装文本的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

如果有可能的话，我不希望它在一个词中间被切断。

293170 次浏览
小开

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

小开
最佳答案

我发现你可以使用白色空间CSS属性:

white-space: normal;

它会把单词分解成普通文本。

小开

你可以通过在HTML源代码中插入换行符来强制执行(我想是浏览器允许的)，如下所示:

<INPUT value="Line 1
Line 2">

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

如果你可以使用HTML <BUTTON>来代替<INPUT>，这样按钮标签就是元素的内容，而不是它的value属性，那么将该内容放在一个<SPAN>中，它的width属性比按钮的属性窄几个像素，这似乎是可行的(即使在IE6:-中也是如此)。

小开

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

小开 
word-wrap: break-word;

为我工作。

小开

如果我们在<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属性后，我的任务完成了。

希望对所有人都有效!!

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

我的两者都适用

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

“两者”都对我有用。


提交答案