角度2在HTML中绑定到特定长度

我正在创建一个电影列表，其中包括：

<li *ngFor="let movie of movies">
   <span class="badge">{{movie.title}}</span>
   {{movie.year}}
</li>

---

有什么简单的方法可以做到这一点吗？

固定

span

的宽度，您可以这样做：

.badge{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: calc(100% - 0.5rem) ;
    text-align: left;
}

li宽度可以使用“rem”计算，具体取决于您打算分配给它的空间

---

这是一个近似的样式，需要根据您的示例进行调整。

文本溢出：Ellipsis您需要实现自定义管道使用管道我同意@Vega。通过css做这件事是个好主意。谢谢。我认为使用CSS而不是角形管道的样式更适合这种情况

.badge{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: calc(100% - 0.5rem) ;
    text-align: left;
}