html - 如果子元素不适合父元素，则用另一个元素替换它

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>

这是 fiddle :https://jsfiddle.net/dsLa5pt9/