How to Wrap Text of HTML Button with Fixed Width

How to wrap text of HTML button with fixed width?

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.

Simple wrapping text in a button but with minimized width without unnecessary white space

Ok, so two things to cover here:

To have the words break when they are super long, just add the property word-break: break-word;. This will break just long words that reached the boundary of the container.
Your container will not reduce its size because when a text node goes under another one, the container is technically still the same size, just that one of its text nodes moved lower. To control how this affects your buttons, you have two options:
a. Correct the max-width value to be way less than 120px, one that is good enough to hold most of the probable text you'll write for the buttons.
b. Add some padding-left to the buttons to make up for its right size.

You can check the fiddle I created for this (using the padding solution) here: https://jsfiddle.net/Ahm7777/aL4L8m5q/5/.

Update

Well, I can't really think of any CSS solution for this, as it's kind of an expected behavior from the interaction of all properties defined, but the easier approach would just be to have a span wrapping the words on the button, retrieve its width and apply it to the button. Here is the fiddle with the sample of what I'm talking about. You'll just have to apply the code to get executed whenever the buttons end loading their text

Make button width fit to the text

Remove the width and display: block and then add display: inline-block to the button. To have it remain centered you can either add text-align: center; on the body or do the same on a newly created container.

The advantage of this approach (as opossed to centering with auto margins) is that the button will remain centered regardless of how much text it has.

Example: http://cssdeck.com/labs/2u4kf6dv

HTML button tag does not word-wrap on iPhone/iPad

Ok. This took a lot of trial and error, but I actually got it to work. The key is to add "height:100%;" in the style string. Take out the height and the button does not grow horizontally. Add height and the button does grow if the text is long enough to cause a word-wrap. Guess without a height specified mobile safari gets confused. Go figure. I hate writing browser code. Sickening to think how many programming hours are wasted on crap like this.

How to wrap text inside bootstrap button without changing button size?

Here you go with a solution https://jsfiddle.net/3yv314dx/3/

$('[data-toggle="tooltip"]').tooltip();

.btn-outline {    background-color: transparent;    color: inherit;    transition: all .5s;}
.btn-wrap-text {    overflow: hidden;  white-space: nowrap;  display: inline-block;  text-overflow: ellipsis;}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script><div class="container">    <div class="row">    <div class="col-sm-6">             <div class="col-sm-4 col-md-4">                    <button class="btn btn-success btn-sm btn-block btn-outline">                        ARTICLE                                            </button>                </div>    <div class="col-sm-4 col-md-4">                    <button class="btn btn-success btn-sm btn-block btn-outline">                       ARTICLE                                      </button>                </div>    <div class="col-sm-4 col-md-4">                    <button class="btn btn-success btn-sm btn-block btn-outline">                         ARTICLE WITH LONGER NAME                    </button>                </div>    <div class="col-sm-4 col-md-4">                    <button class="btn btn-success btn-sm btn-block btn-outline">                         ARTICLE                           </button>                </div>    <div class="col-sm-4 col-md-4">                    <button class="btn btn-success btn-sm btn-block btn-outline">                        ARTICLE                                   </button>                </div>    <div class="col-sm-4 col-md-4">                    <button class="btn btn-success btn-sm btn-block btn-outline">                       ARTICLE                                 </button>                </div>    <div class="col-sm-4 col-md-4">                    <button class="btn btn-success btn-sm btn-block btn-outline">                        ARTICLE WITH LONGER NAME                    </button>                </div>    <div class="col-sm-4 col-md-4">                     <button class="btn btn-success btn-sm btn-block btn-outline btn-wrap-text" data-toggle="tooltip" title="ARTICLE WITH LONGER NAME">                       ARTICLE WITH LONGER NAME                    </button>                </div>    <div class="col-sm-4 col-md-4">                    <button class="btn btn-success btn-sm btn-block btn-outline">                        ARTICLE                                            </button>                </div>    <div class="col-sm-4 col-md-4">                    <button class="btn btn-success btn-sm btn-block btn-outline">                        ARTICLE                                             </button>                </div>    <div class="col-sm-4 col-md-4">                    <button class="btn btn-success btn-sm btn-block btn-outline">                        ARTICLE                                            </button>                </div>               <div class="col-sm-4 col-md-4">                    <button class="btn btn-success btn-sm btn-block btn-outline">                        ARTICLE                                            </button>                </div>    <div class="col-sm-4 col-md-4">                    <button class="btn btn-success btn-sm btn-block btn-outline">                        ARTICLE                                            </button>                </div>            </div>                 </div>    </div>

How can I wrap or break long text/word in a fixed width span?

You can use the CSS property word-wrap:break-word;, which will break words if they are too long for your span width.

span {     display:block;    width:150px;    word-wrap:break-word;}

<span>VeryLongLongLongLongLongLongLongLongLongLongLongLongExample</span>

Button text wrap: vertical alignment issue

I'm not sure what's causing this misalignment, but apparently vertical-align:middle seems to fix it:

http://jsfiddle.net/ptriek/Dr5hM/

How to Wrap Text of HTML Button with Fixed Width