Angular 8 中带有 ngx-ellipsis 的文本溢出

【问题标题】：Text Over Flow with ngx-ellipsis in Angular 8Angular 8 中带有 ngx-ellipsis 的文本溢出
【发布时间】：2020-03-08 22:56:24
【问题描述】：

我的名称是“c0f6bd14-11ea-be017_001_lbl_017”，它是表单名称和其他一些属性的组合。现在由于它很长，我想缩短这个名称以显示在前端。我能够以“c0f6bd14-11e...”的形式获得，现在我想要的是第一个和最后一个单词的形式，即“c0f6bd14-11e.. .017"

我应该使用什么？

目前，我正在使用 ngx-ellipsis，CSS 如下：

.shortenText {
     width: 200px;
     text-overflow: ellipsis;
     overflow: hidden;
     white-space: nowrap;
     display:inline-block;
     right: -5px;
}

【问题讨论】：

嗨！我是 ngx-ellipsis 的作者，可以确认它不支持这一点。无论如何，只有 multiline 省略号才需要该库 - 否则您可以只使用 Mileta Dulovic 提供的简单 js。

标签： css angular angular8

【解决方案1】：

你可以使用这个功能

function myFunction() {
  var str = "Helloworld!"; 
  var res = str.slice(0, 3) + '...';
  var res2 = str.slice(-3)
  var res3 = res + res2;
  document.getElementById("demo").innerHTML = res3;
}

这将打印Hel...ld!

我相信它可以做得更好，但你明白了

在 res 中，您首先存储 x 字符数并将 ... 附加到它。在res2 中，您将获得最后 3 个字符并将它们附加到res2。

在res3 中附加这两个结果并显示它们..

还有。我很抱歉混乱的代码。我正在用我的手机写这个:)

希望这有帮助:)

【讨论】：