javascript - 内容溢出时如何用css badge限制div

Question

我遇到的情况是所选元素溢出了 div。但我已经设法通过 css 属性将其包装起来。

现在我打算在内容宽度越过父 div 以从图像 1 转换为图像 2 时放置一个 css 徽章:

.

<div class="list-view">
    <div class="item-box">
        <h4>select Cities</h4>
        <ul>
            <li *ngFor="let item of cityList" (click)="selectedCity(item)">{{item}}</li>
        </ul>
    </div>
</div>

我有来自此链接的示例代码 https://stackblitz.com/edit/angular-uatw5p .我试图实现这一目标，但找不到方法。谁能告诉我如何实现这一目标？

Answer 1

根据要显示的元素数对数组列表进行切片。我用了三个元素来展示。并从数组的总长度中减去三。使用 CSS 按照您想要的方式对其进行格式化。

<div class="container-fluid">
  Cities
    <a *ngFor="let item of selectedItems.slice(0, 3)" href="javascript:void(0)">{{item}}</a>
   <div *ngIf="selectedItems.length > 3">+{{selectedItems.length - 3}}</div>
    <button (click)="selectedItems=[]">Reset</button>
</div>

以上将为您提供以下结果:

编辑:将以下内容与另一个答案中提供的 CSS 一起使用:

<a href="javascript:void(0)" class="selection">
   <p>Cities {{selectedItems.length? ' : ' + selectedItems.slice(0, 3): '' }}</p>
  <span *ngIf="selectedItems.length > 3">+{{selectedItems.length - 3}}</span>
</a>