Question

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

示例：

我希望它能留在我把它放入的class =“well”（col-md-2）中。

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

如果全文

，则示例

[这是按钮上的说明]。

如果它是col-md- *的长度，它将显示以下内容。

[这是描述......]

我发现这段代码可以隐藏溢出但似乎不起作用。有什么建议吗？

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

CodePen示例

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

Answer 1

试试这个

.btn-group{
display:block;
}

.well-lg{
 overflow:hidden;
}

这是我身边的结果。 http://jmp.sh/HOownK5

Answer 2

我希望这能解决你的问题

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

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

2 个答案: