<ion-card-title> 中的文本溢出省略号不起作用 --> Shadow-Dom-Element 不采用父宽度答案

【问题标题】：Text-overflow ellipsis in <ion-card-title> does not work --> Shadow-Dom-Element does not take parent width<ion-card-title> 中的文本溢出省略号不起作用 --> Shadow-Dom-Element 不采用父宽度
【发布时间】：2019-12-10 20:41:24
【问题描述】：

Ionic 4 中的列表页有问题。我想显示一些<ion-card> 元素。中的文本可能很长（它们来自后端）。我不希望他们换行，而是使用省略号（“...”） - 请参阅下面的屏幕截图。

通常我只会在父元素上设置overflow: hidden，在我想要省略号的元素上设置white-space: nowrap; text-overflow: ellipsis;。然而，由于 web-component-shadow-dom-stuff 这不能开箱即用，我不知道为什么......

您可以看到，<ion-card-title> 没有占用父级的宽度。 如何操作文本“This is a long text. 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>

（简化）CSS

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;
    }
}

目前看起来是这样的

我希望它看起来像这样

【问题讨论】：

标签： css ionic-framework ionic4 web-component shadow-dom

【解决方案1】：

在你的ion-card-titlecss 中，添加overflow: hidden;

【讨论】：

【解决方案2】：

只是添加overflow: hidden 似乎不起作用。

从 csstricks 开始，width 需要在元素上： https://css-tricks.com/snippets/css/truncate-string-with-ellipsis/

.truncate {
  width: 250px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

添加宽度为我修复了它...

【讨论】：