Search code examples
cssionic-frameworkionic4web-componentshadow-dom

Text-overflow ellipsis in <ion-card-title> does not work --> Shadow-Dom-Element does not take parent width

I have a problem with a List Page in Ionic 4. I want to display some <ion-card> elements. The texts in can be very long (they are comming from the backend). I do not want them to line break, but to use the ellisis ("...") - See Screenshots below.

Normally I would just set overflow: hidden on the parent, and white-space: nowrap; text-overflow: ellipsis; on the element I want to have the ellipsis. However because of the web-component-shadow-dom-stuff this does not work out of the box, and I can't figure out why...

You can see, that <ion-card-title> is not taking the width of the parent. How do I manipulate the text "This is a long text. Lorem..." that it fits the container and correctly sets the ellipsis?

enter image description here

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>

(simplified) 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;
    }
}

It currently looks like this

enter image description here

I want it to look like this

enter image description here

Solution

  • in your ion-card-title css, add overflow: hidden;