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

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

例如：

我希望它留在我放进去的class=“well”（col-md-2）中

例如，如果它在class=“well”（col md-*）中停留的时间太长，我希望它使用省略号（或仅删除字符）

如果全文是

[这是按钮上的说明]

如果要长取它所在的列md-*，它将显示以下内容

[这是描述…]

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

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

代码笔示例

试试这个

.btn-group{
display:block;
}

.well-lg{
 overflow:hidden;
}

这是我这边的结果

试试这个

.btn-group{
display:block;
}

.well-lg{
 overflow:hidden;
}

---

这是我这边的结果

我希望这能解决你的问题

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

---

我希望这能解决你的问题

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

---

---

您能给我们提供重现错误的代码吗？类似CodePen或JSFiddle的东西工作得很好。@CalebAnthony CodePen示例已添加。你希望井和按钮的宽度相同，如果按钮宽度增加，井的相应宽度增加？@Aravind否，我希望井留在col-md-2内，按钮留在井内。如果按钮文本会从末端和井外消失，则按钮文本应以“…”结尾。您能给我们提供代码来重现错误吗？类似CodePen或JSFiddle的东西工作得很好。@CalebAnthony CodePen示例已添加。你希望井和按钮的宽度相同，如果按钮宽度增加，井的相应宽度增加？@Aravind否，我希望井留在col-md-2内，按钮留在井内。按钮文本应以“…”结尾，如果文本会离开井端和井外。md柱-*？我不希望井继续延伸，我希望它保持在md柱-2内。你现在面临的问题是什么？@KevinVasko现在检查@阿拉文，谢谢！这让我有了99%的成功。唯一的问题是（我不知道如何在代码笔中重现）当实际选择下拉菜单时，下拉框列表保留在class=“well”中，并切断所有项目。我会把你的答案标记为正确的，但如果你知道如何解决这个问题，会节省我很多时间。谢谢什么是col md-*？我不希望油井继续延伸，我希望它保持在col-md-2内。你现在面临的问题是什么？@KevinVasko现在检查@阿拉文，谢谢！这让我有了99%的成功。唯一的问题是（我不知道如何在代码笔中重现）当实际选择下拉菜单时，下拉框列表保留在class=“well”中，并切断所有项目。我会把你的答案标记为正确的，但如果你知道如何解决这个问题，会节省我很多时间。谢谢你的代码笔似乎不起作用（链接对我不起作用，看不到你有什么）。但我把你的建议记在心里了，结果不太管用。我希望能看到按钮的末端。谢谢你的答案也适用（看起来是一样的），不确定它们是相互抄袭的，但我在你之前看到了另一个。但它们都有相同的问题，即当您单击下拉框时，所有列表项都留在class=“well”中。不管怎样，有没有像现在这样的停留，和。。。但是当用户点击按钮时，它会显示井外的整个列表？我正在尝试获取代码笔，但无法让JS在代码笔内工作。您的代码笔似乎不工作（链接对我不起作用，看不到您有什么）。但我把你的建议记在心里了，结果不太管用。我希望能看到按钮的末端。谢谢你的答案也适用（看起来是一样的），不确定它们是相互抄袭的，但我在你之前看到了另一个。但它们都有相同的问题，即当您单击下拉框时，所有列表项都留在class=“well”中。不管怎样，有没有像现在这样的停留，和。。。但是当用户点击按钮时，它会显示井外的整个列表？我正试图获得一个代码笔，但无法让JS在代码笔内工作。