动态宽度的引导3按钮保持在col-md- *长按钮上的按钮 [英] Dynamic width of a bootstrap 3 button to stay in col-md-* with long label on button

问题描述

示例：

p>

。

我希望它拥有它留在班级=好（col-md-2），我把它放进去。

例如，我希望它使用省略号（或只是切割如果它太长而不能保持在它所在的class =well（col-md- *）内。

全文是

[这是按钮上的描述]。

如果它长对于它所在的col-md- *。

[这是描述...]

我发现这个代码来隐藏溢出，但它似乎并没有工作。任何建议？

  .hideOverflow 
 {
 overflow：hidden; 
 white-space：nowrap; 
文本溢出：省略号; 
宽度：100％; 
 display：block; 
} 
  

CodePen示例

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:

.

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

解决方案

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;
}

这篇关于动态宽度的引导3按钮保持在col-md- *长按钮上的按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！