Ionic-framework: headings in ion-labels don't inherit overflow and text-overflow

[simonhaenisch]

Bug Report

Ionic version:

[x] 4.x

Current behavior:

When nesting a heading (h1, h2, ...) inside an ion-label, the overflow: hidden and text-overflow: ellipsis attributes don't get inherited (anymore?).

Expected behavior:

The headings should inherit the proper overflow attributes.

Steps to reproduce/related code:

https://codepen.io/simonhaenisch/pen/JjPXPEq

<ion-list>
  <ion-item>
    <ion-label>
      <h2>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Architecto laborum, voluptatum corporis reprehenderit ipsa nostrum aperiam optio porro? Ipsa pariatur, earum sapiente nihil sed perspiciatis nostrum voluptas ipsum mollitia repellendus.</h2>
    </ion-label>
  </ion-item>
</ion-list>

Other information:

When setting text-wrap on the ion-label, the nested headings get wrapped as well, but setting text-nowrap still doesn't apply text-overflow: ellipsis or overflow: hidden to the heading.

Ionic info:

@ionic/[email protected]

[paulstelzer]

Thanks for your issue! A label NOT wraps a text by default. To make it work, you HAVE to add text-wrap. This is the intention and it would be a breaking change if ion-label wrapped the text by default

[simonhaenisch]

@paulstelzer this is not about text-wrap, this is about the default non-wrap not applying the text-overflow: ellipsis to any heading element (h1, h2, etc) but only to paragraphs (p) or text that is directly nested into the ion-label. Is that really intended?

[paulstelzer]

If you not add text-wrap, the text will not wrap ;)

UPDATE: Or do you mean you miss the ellipsis on h1 etc? If you mean this, I will reopen it - then you are right :) Sorry for missunderstanding!

[duyetnk]

try add "width: 100%; float: left;"

[simonhaenisch]

@duyetnk how does that fix the missing ellipsis? The workaround I'm currently using is to add

ion-item
  ion-label
    h2
      overflow: hidden
      text-overflow: ellipsis

[duyetnk]

i mean

ion-item
  ion-label
    h2
      overflow: hidden
      text-overflow: ellipsis
      width: 100%
      float: left

[simonhaenisch]

I neither need width: 100% nor float: left though? 🙂

[simonhaenisch]

Can confirm that this is still an issue with Ionic 4.6:

https://codepen.io/simonhaenisch/pen/YoEGWM?editors=1000

[simonhaenisch]

Can also confirm that this still happens with latest Ionic 4.7.4.

https://codepen.io/simonhaenisch/pen/JjPXPEq

[simonhaenisch]

Still happens with Ionic 5 (my codepen always loads the latest Ionic from unpkg so it's easy to verify).

@brandyscarney would you accept a PR that adds

:host {
  & > h1, & > h2, & > h3, & > h4, & > h5, & > h6 {
    overflow: inherit;
    text-overflow: inherit;
  }
}

to src/components/label/label.scss?

[brandyscarney]

@simonhaenisch I believe it would need to be this instead:

::slotted(*) h1,
::slotted(*) h2,
::slotted(*) h3,
::slotted(*) h4,
::slotted(*) h5,
::slotted(*) h6 {
  text-overflow: inherit;

  overflow: inherit;
}

but yes I would accept this.

Could you add a test in label/test/ called headings that is basically the same as your Codepen including the headings and paragraph? I can review and make changes. Thank you for offering to PR this!!

[simonhaenisch]

@brandyscarney not sure you've seen it, I've opened a PR for it ☝️

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.