如何显示内容的省略号

Question

我正在构建一个Ionic3/Angular应用程序，我有一些卡片列表，如下所示：

所以，你可以看到我的笔记可以大于卡片的宽度。因此，它已使用 ion-item 截断为省略号。

<ion-col col-11 class="padding-0">
     <ion-item class="padding-left-0">{{noteInfo.Notes}}</ion-item>
</ion-col>

但是，问题是注释并不总是像“这是测试”这样的纯字符串。它可以是 HTML 元素，如

<span style='color:red'>This is test</span>

并且音符可能比这个简单音符大。由于笔记将是HTML元素，我更改了我的代码以显示卡中的注释，如下所示：

<ion-col col-11 class="padding-0">
                    <ion-item class="padding-left-0" [innerHTML]="progressNote[0].HTMLNotes | safeHtml:'html'">
                    </ion-item>
</ion-col>

输出是：

但是，我有一个每个音符的扩展按钮，如果我点击它，实际音符如下所示：

现在，您可以看到在 ion-item 的 innerHTML 中设置HTML，如果注释大于宽度，则不会显示省略号。但是，我只需要在卡片中显示预览，并且预览需要着色。

那么，有没有办法在离子项中显示HTML元素，以便宽度可以容纳在卡中，然后显示其余内容的省略号？

提前致谢..

Answer 1

Here's an example div的内容可以按照您的意愿行事，您可以在离子列上应用CSS规则。

<强> HTML

<div class="card">
  <div class="item">
  short text
 </div>
  <div class="item">
  long text wrgj rgoiherg eroighe goeirhg rgirg rgihreg
  </div>
</div>

<强> CSS

.card{
  width: 200px;
}

.item{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}