Html 如果子元素不适合父元素，请将其替换为另一个元素

我有一个固定宽度的div。里面有三个按钮。问题是，如果这些按钮太长，它们就不适合div。我想要的是用小按钮替换最后一个按钮（如果它们都太长，则替换两个按钮）。应该是这样的：

HTML:

---

以下是我添加的JS：

$(function() {
  var width = 0;
  $(".btn").each(function() { //searches for all elements with class "btn"
    width += ($(this).width() + 7); //+7 comes from padding
  });
  if (width > $('.listTags').width()) {
    $('.listTags').children().last().text("..."); //changes last child to ...
  }
})

---

这些评论解释了正在发生的事情。我认为这正是您的目标，这里有一个。

假设包含jquery，下面是一个可行的示例：

var containerWidth=$（“.listTags”）.width（）；
var one=$（“#one”）.outerWidth（）；
var two=$（“#two”）.outerWidth（）；
var three=$（“#three”）.outerWidth（）；
如果（一+二+三>集装箱宽度）{
$（“#三”）.hide（）；
$（“#四”）.show（）；
}

CSS无法决定这一点，您需要明确定义它，否则您需要使用JSYes，我知道。但是不知道如何实现它（（（你可以这样尝试，得到你拿着按钮的包装的宽度，把里面按钮的宽度加起来，如果超过包装的宽度，就显示最后一个按钮，否则就隐藏最后一个按钮。

$(function() {
  var width = 0;
  $(".btn").each(function() { //searches for all elements with class "btn"
    width += ($(this).width() + 7); //+7 comes from padding
  });
  if (width > $('.listTags').width()) {
    $('.listTags').children().last().text("..."); //changes last child to ...
  }
})