Css <；中的文本溢出省略号；离子卡标题>；不起作用-->；阴影Dom元素不采用父宽度

我对爱奥尼亚4中的列表页有问题。 我想显示一些

元素。 中的文本可能很长（它们是从后端提交的）。我不想让他们断线，但要使用省略号（“…”）-见下面的截图

通常我只会在父级上设置

overflow:hidden

，并设置

white space:nowrap；文本溢出：省略号在元素上，我想要省略号。然而，由于web组件的阴影dom的东西，这不是开箱即用的，我不明白为什么

您可以看到，
没有占用父对象的宽度如何处理文本“这是一个长文本。Lorem…”以确保它适合容器并正确设置省略号？


HTML

   <ion-card>
    <ion-card-header>
        <div class="card-header-title-wrapper">
            <ion-checkbox></ion-checkbox>
            <ion-card-title>This is a long text. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
                tempor</ion-card-title>
        </div>
        <ion-card-subtitle text-end>Subtitle</ion-card-subtitle>
    </ion-card-header>
    <ion-card-content>
        Card Content...
    </ion-card-content>
</ion-card>

现在看起来是这样的

我希望它看起来像这样
在您的
离子卡标题中添加
溢出：隐藏
仅添加
溢出：隐藏的
似乎不起作用

从csstricks开始，元素上需要
宽度
：

.truncate{
宽度：250px；
空白：nowrap；
溢出：隐藏；
文本溢出：省略号；
}

为我添加一个固定宽度

div.card-header-title-wrapper {
  display: flex;
  overflow: hidden;

  ion-checkbox {
    margin-top: 3px;
    margin-right: 12px;
    flex-grow: 0;
    flex-shrink: 0;
  }
}

ion-card-header {
    ion-card-title {
        font-size: 16px;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
}