HTML中的Angular 2绑定到特定长度

Question

我正在创建一个电影列表：

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

对于某些电影看起来不错，但对其他电影则不好。如何确保movie.title始终显示15个字符？有些电影会比我想要添加填充更少，有些电影会更多，我想修剪并添加'...'到最后。

示例：

Game of Thrones
Not Game of ...
Some Other M...

这么简单吗？

Answer 1

修正span的宽度，您可以执行此操作：

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

li宽度可以使用＆＃f;来计算，具体取决于您打算分配给它的空间。

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