css - 隐藏溢出时的额外按钮

Question

在这里，我展示了应用于结果的过滤器，选定的将是活动的，其余的将不会是活动的。但是如果结果超出了那一行，我需要为其他的创建一个隐藏/显示按钮，这将是动态的并且取决于过滤器的数量。

例如：

<button>Filter 1</button><button>Filter 2</button><button>Filter 3</button><button (click)="showAll()">+2 more</button>

当我单击 +2 更多时，它应该显示剩余的两个。如果只有 3 个，则不会再有 +2 个。

这种情况下怎么用overflow:hidden？

<div class="row">
    <div class="col-md-12 button-row">
        <button mat-raised-button color="primary"selected>{{selectedFilter.name}}</button>
        <button mat-stroked-button color="primary"selected *ngFor="let subject of selectedFilter.listOfFilters" [ngClass]="{'active':subject===selectedFilter.selected}">{{subject}}</button> 
    </div>
</div>

标签： cssangulartypescript