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

Question

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

HTML：

<div class="listTags">
 <a href="#" class="btn">Sport</a>
 <a href="#" class="btn">Football</a>
 <a href="#" class="btn">Wolverhampton</a>
 <a href="#" class="btn" style="display:none">•••</a>
</div>

这是fiddle。

Answer 1

这是一个可行的示例，假设包含了jquery：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="listTags">
  <a id="one" href="#" class="btn">Sport</a>
  <a id="two" href="#" class="btn">Football</a>
  <a id="three" href="#" class="btn">Wolverhampton</a>
  <a id="four" href="#" style="display:none" class="btn">...</a>
</div>
<script>
var containerWidth = $(".listTags").width();
var one = $("#one").outerWidth();
var two = $("#two").outerWidth();
var three = $("#three").outerWidth();

if (one + two + three > containerWidth) {
    $("#three").hide();
    $("#four").show();
}
</script>

这是小提琴：https://jsfiddle.net/dsLa5pt9/

Answer 2

我添加的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 ...
  }
})

评论解释了发生了什么。我认为这是你的目标，而且这里是example。