html - bootstrap 3 按钮的动态宽度保持在 col-md-* 中，按钮上有长标签

Question

我有一个按钮，其中有一个描述(这些是动态加载的)对于它所在的井来说太长了。

例子:

.

我希望它保留在我放入的 class="well"(col-md-2) 中。

因此，例如，如果它太长而不能留在它所在的 class="well"(col-md-*) 中，我希望它使用省略号(或只是切断字符)。

如果全文是

[这是按钮上的描述]。

如果它对它所在的 col-md-* 很长，它会显示以下内容。

[这是描述...]

我发现这段代码可以 overflow hidden ，但它似乎不起作用。有什么建议吗？

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

代码笔示例

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

Answer 1

我希望这能解决你的问题

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

这将是你的 CSS

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

.btn-group{
display:block;
}

.well-lg{
 overflow:hidden;
}