CODEWITHSUNDEEP
htmlcssbuttonword-wrap
Peter
Peter

Reputation: 14518

How to wrap text of HTML button with fixed width?

I just noticed that if you give an 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.

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

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

Roos Sturingen / Sen
sors

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

Upvotes: 251

Views: 334180

Answers (9)

O. V.
O. V.

Reputation: 203

line-break: anywhere;

or

word-break: break-all;

also possible.

Upvotes: 1

Siu
Siu

Reputation: 97

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

white-space: normal;

And it will break the words as normal text.

Upvotes: 687

Bhavani Raju
Bhavani Raju

Reputation: 179

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

"Both" worked for me.

Upvotes: 7

Richard
Richard

Reputation: 596

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

Mine works with both

Upvotes: 38

S.Yadav
S.Yadav

Reputation: 4509

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-

 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.

Hope will work for all !!!

Upvotes: 2

Juubes
Juubes

Reputation: 23

word-wrap: break-word;

worked for me.

Upvotes: 1

Nick Saemenes
Nick Saemenes

Reputation: 129

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

Upvotes: 6

Brian Nixon
Brian Nixon

Reputation: 9838

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

<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 :-).

Upvotes: 8

Daan
Daan

Reputation: 6994

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.

Upvotes: 2

Related Questions