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

Question

I'm trying to wrap or resize text inside bootstrap button without changing button size.I have couple buttons that must be aligned

I've used this class,text is wrap but button grows in size affecting the alignment with other buttons

 .btn-wrap-text {
    white-space: normal !important;
    word-wrap: break-word !important;
}

There is sample code,just resize the view: https://jsfiddle.net/mrapi/3yv314dx/1/

thanks

Answer 1

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>

Here in the solution, I've used ellipse to truncate extra characters & to show entire text used tooltip

Answer 2

Not sure why all the complicated solutions.

Just add the following to your .btn css:

white-space: normal;

So, if you already have a .btn in your global css file, do this:

.btn {
    white-space: normal;
}

Or if you do not have anything in your global css file, just do it inline, such as:

<button type="button" class="btn btn-primary" style="white-space: normal;">This is some button with text that should wrap</button>

Note: This method may not work on archaic versions of IE