How to wrap text of HTML button with fixed width?

Question

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.

3 revs, 3 users 71% · Accepted Answer · 2019-04-24 12:31:45Z

689

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.

edited Apr 24, 2019 at 12:31

community wiki

3 revs, 3 users 71%
Siu

Sign up to request clarification or add additional context in comments.

2 Comments

low_rents Over a year ago

@MGOwen it's ok now - we deadened IE6 in the meantime.

F1Krazy Over a year ago

The other answers suggesting word-wrap: break-word; didn't work for me, but this did.

Richard · Accepted Answer · 2017-08-18 00:17:17Z

38

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

Mine works with both

answered Aug 18, 2017 at 0:17

Richard

5965 silver badges12 bronze badges

Comments

Brian Nixon · Accepted Answer · 2010-05-01 19:42:03Z

8

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

edited May 1, 2010 at 19:42

answered Apr 4, 2010 at 14:36

Brian Nixon

9,9781 gold badge20 silver badges24 bronze badges

2 Comments

KevinH Over a year ago

For something very simple you can also use <button> with a <br> at the desired break point.

Joe Mabel Over a year ago

Used to work, but no longer works in recent versions of Chrome.

Bhavani Raju · Accepted Answer · 2018-06-13 11:08:29Z

7

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

"Both" worked for me.

edited Jun 13, 2018 at 11:08

answered Apr 17, 2018 at 8:12

Bhavani Raju

1792 silver badges8 bronze badges

Comments

Druid · Accepted Answer · 2012-07-12 13:09:41Z

6

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

edited Jul 12, 2012 at 13:09

Druid

6,4634 gold badges44 silver badges57 bronze badges

answered Jul 11, 2012 at 21:15

Nick Saemenes

1292 silver badges3 bronze badges

Comments

Daan · Accepted Answer · 2009-05-14 08:22:35Z

2

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.

answered May 14, 2009 at 8:22

Daan

7,0044 gold badges33 silver badges37 bronze badges

1 Comment

Peter Over a year ago

The problem is that I am using ASP.Net, using the asp:button control with CommandName and CommandArgument attributes. I can't just use an other control.

S.Yadav · Accepted Answer · 2017-02-22 09:32:01Z

2

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

answered Feb 22, 2017 at 9:32

S.Yadav

4,5193 gold badges41 silver badges45 bronze badges

3 Comments

Christian Gollhardt Over a year ago

How does this differs from this answer?

S.Yadav Over a year ago

It is, if you notice, I have used that with button tag.

Ian Devlin Over a year ago

Divs are not allowed within a button, it is not correct HTML.

Juubes · Accepted Answer · 2016-11-26 19:34:35Z

1

word-wrap: break-word;

worked for me.

answered Nov 26, 2016 at 19:34

Juubes

231 silver badge8 bronze badges

Comments

O. V. · Accepted Answer · 2023-03-23 18:01:18Z

1

line-break: anywhere;

or

word-break: break-all;

also possible.

edited Mar 23, 2023 at 18:01

answered Mar 23, 2023 at 17:42

O. V.

2133 silver badges8 bronze badges

Collectives™ on Stack Overflow

How to wrap text of HTML button with fixed width?

9 Answers 9

2 Comments

Comments

2 Comments

Comments

Comments

1 Comment

3 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

9 Answers 9

2 Comments

Comments

2 Comments

Comments

Comments

1 Comment

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related