Javascript 如何有条件地截断文本元素？

在我的角度分量中，我有一个由两个值组成的文本。在我的模板中：

 <svg-icon [name]="someName" class="d-inline-block"></svg-icon>

 <strong class="any">
    {{ program.name }}
    <span class="pcr">{{ program.pcr }}</span>
 </strong>

{{program.name}
{{program.pcr}

我想做的是用省略号（…）截断文本，但要用一种特殊的方式

当整个文本显示空间不足时，我希望首先截断

程序.name

。将屏幕大小调整为更小，文本可以缩短，直到不少于5个字符（省略号除外）。如果仍然没有足够的空间，我想截断

程序.prc

---

我试图使用

Hostbinding

生成一个指令，但我不知道如何处理逻辑。也许有类似问题的现成解决方案？有人可以帮忙吗？

您可以尝试使用css之类的功能。尝试调整窗口大小以查看效果。我知道css属性，但我描述的案例的问题是如何实现逻辑。跨度中有两个元素。我希望其中一个先做出反应，第二个在第一个元素剩下5个字符的时候做出反应。这将是一个非常复杂的过程，我会给你写一个解决方案，但我现在没有时间。您可以使用@palaѕѕаа提到的解决方案，但在

{{program.name}}

周围添加一个带

min-width

的额外跨度？我描述的问题的最佳解决方案可以在这里找到：