css - 如何根据 <span> 的长度截断它，并添加省略号(...)

Question

如果跨度的宽度超过一定大小，我想截断(实际上是剪切)跨度的内容并添加省略号 (...)。这个问题使得单个字母可以是大的“w”(W)，也可以是小的“i”(i)，其大小变化很大，因此基于字母数量的截断效果不太好。如何预先计算 div 的长度，以便我可以剪掉几个字母，然后在其中添加省略号？

Answer 1

不要对 Angular 执行此操作。您应该使用 CSS 添加省略号。下面是一个类的示例，您可以将其应用于跨度，该跨度将自动截断显示的文本:

.truncate-text {
    white-space: nowrap;
    text-overflow: ellipsis;
    width: 100px; /* your width */
    display: block;
    overflow: hidden
}