Toggle text-overflow: ellipsis; for md-list-item's headline and supporting-text

[hakataminamiWS]

I am using <md-list-item> component from release v1.0.0.
When I set a string that is longer than the width of the list to the headline or supporting-text of the list-item, it wraps around (in Chrome).

I would like to set it to text-overflow: ellipsis; when the string is longer than the list width, but I couldn't find a way to do so.

As a workaround, I tried setting

width: 100%;
white-space: nowrap;

to <button> (when type="button") inside the shadow dom of <md-list-item>.
This made it display like text-overflow: ellipsis;.

Is there a way to toggle text-overflow: ellipsis; for md-list-item's headline and supporting-text?

Environment information:
OS: Windows 11
Browser: Chrome 117.0.5938.150（Official Build） （64 bit）
Version of md-list-item: v1.0.0

[asyncLiz]

Looks like the .list-item CSS needs a width: 100%

Do you mind filing an issue? Would also appreciate a PR if you can manage!

[asyncLiz]

Also using white-space: nowrap is the correct way to make the lines wrap or not

[hakataminamiWS]

Thanks for your reply.

I’m considering creating an issue or PR, but can I discuss something with you first?

I think it might be best to always set width: 100% and make white-space controllable. What do you think?

If we do that,
I think we have a few options:

Option a. Add like this white-space: var(--md-list-item-white-space, 'normal'); to the .list-item CSS

Option b. Add a part attribute to the list-item HTML

Option c. Something else (any ideas?)

I’m leaning towards option a., but are there similar examples in other components?

[hakataminamiWS]

Perhaps without any code changes,
It may work by simply specifying the following in the slot.

display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
overflow: hidden;

I'll check it later and get back with the results.

[hakataminamiWS]

In conclusion, to apply the style like text-overflow: ellipsis; to headline and supporting-text of <md-list-item>, it seems that the following settings should be applied to each slots (slot="headline", "supporting-text").

display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
overflow: hidden;

example

[asyncLiz]

That is correct, here's the demo CSS to control wrapping and/or clamping.

  /* Use this CSS to prevent lines from wrapping */
  .nowrap {
    white-space: nowrap;
  }

  /* Use this CSS on items to limit the number of wrapping lines */
  .clamp-lines {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

I believe the list-item still needs a width: 100% added to it though.

[hakataminamiWS]

Hmmm... maybe. I'll take a closer look. Is there any difference with or without width: 100%;?

[asyncLiz]

I don't believe so, the slots should expand to the width of the item