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

I just noticed that if you give a html button a fixed width, the text inside the button is never wrapped. I've tried it with word-wrap, but that cuts of the word even though there are spaces available to wrap on.

我刚刚注意到，如果给一个html按钮一个固定的宽度，按钮内的文本就不会被包装。我曾经尝试过用词包，但那是对词的删减，即使有空间来包装。

How can I make the text of an html button with a fixed width wrap like any tablecell would?

我怎样才能像任何桌布一样用固定的宽度包装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>

the css classes do nothing but adding borders and modify the padding. If I add word-wrap:break-word to this button, it will wrap it like this:

css类除了添加边框和修改填充之外什么都不做。如果我在这个按钮上添加word-wrap:break-word，它会这样包装:

Roos Sturingen / Sen
sors

And I dont want it to cut of in the middle of a word if it is possible to cut it off between words.

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

Thanks

谢谢

8 个解决方案

#1

391

I found that you can make use of the white-space css property:

我发现你可以使用空格css属性:

white-space: normal;

And it will break the words as normal text.

它会像普通文本一样打断单词。

Hope it helps.

希望它可以帮助。

#2

You can force it (browser permitting, I imagine) by inserting line breaks in the HTML source, like this:

您可以通过在HTML源代码中插入换行符来强制它(浏览器允许)，如下所示:

<INPUT value="Line 1
Line 2">

Of course working out where to place the line breaks is not necessarily trivial...

当然，弄清楚在哪里放置换行符并不一定是小事一桩……

If you can use an HTML <BUTTON> instead of an <INPUT>, such that the button label is the element's content rather than its value attribute, placing that content inside a <SPAN> with a width attribute that is a few pixels narrower than that of the button seems to do the trick (even in IE6 :-).

如果您可以使用HTML <按钮> <输入> ,这样按钮标签元素的内容,而不是它的价值属性,把这些内容在< SPAN >的宽度属性的几个像素小于按钮似乎奏效(即使在IE6:-)。

#3

I have found that a button works, but that you'll want to add style="height: 100%;" to the button so that it will show more than the first line on Safari for iPhone iOS 5.1.1

我发现一个按钮可以工作，但是你需要在按钮上添加style="height: 100%;"这样它就会显示iPhone iOS 5.1.1 Safari上的第一行

#4

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

Mine works with both

我的工作与

#5

If we have some inner divisions inside <button> tag like this-

如果我们在

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

Sometime Text of class A get overlap on class1 data because these both are in a single button tag. I try to break the tex using-

类A的某些文本会在类1数据上重叠，因为它们都在一个按钮标记中。我试图用-来破坏tex

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

But this won't worked then I try this-

但是这个行不通，我试试这个

white-space: normal;

after removing above css properties and got my task done.

在删除上面的css属性并完成任务之后。

Hope will work for all !!!

希望将为所有人工作!!!

#6

Multi-line buttons like that are not really trivial to implement. This page has an interesting (though somewhat dated) discussion on the subject. Your best bet would probably be to either drop the multi-line requirement or to create a custom button using e.g. divs and CSS, and adding some JavaScript to make it work as a button.

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

#7

word-wrap: break-word;

worked for me.

为我工作。

#8

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

"Both" worked for me.

“都”为我工作。

#1

391