Kevin Vasko Kevin Vasko - 3 months ago 9
CSS Question

Dynamic width of a bootstrap 3 button to stay in col-md-* with long label on button

I have a button that has a description (these are dynamically loaded) in it that is too long for the well that it is in.

Example:

Example of well being too large.

I would like it to have it stay in the class="well" (col-md-2) that I put it in.

So for example I would like it to use ellipsis (or just cutting off characters) if it is too long to stay within the class="well" (col-md-*) that it is in.

Example if the full text is

[This is the description on the button].

It would display the following if it is to long for the col-md-* that it is in.

[This is the descri...]

I found this code to hide the overflow but it doesn't seem to work. Any suggestions?

.hideOverflow
{
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
width:100%;
display:block;
}


CodePen example

http://codepen.io/anon/pen/WGNgNG

Answer

I hope this solves your problem

<div class="container-fluid">
<div class="row">
    <div class="col-md-2">
        <div class="well well-lg">
            <div class="btn-group">
              <button type="button" class="btn btn-default dropdown-toggle hideOverflow" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
               This is some really really really really long text<span class="caret"></span>
               </button>
                <ul class="dropdown-menu">
                    <li><a href="#">some button</a></li>
                  <li><a href="#">some button</a></li>
                  <li><a href="#">some button</a></li>
                  <li><a href="#">some button</a></li>
                </ul>
            </div>
        </div>
    </div>
</div>

and this will be your css

.hideOverflow
{
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
    width:100%;
    display:block;
}

.btn-group{
display:block;
}

.well-lg{
 overflow:hidden;
}

enter image description here