Material: list: md-list-item-text does not wrap or truncate when the text has no white space

[oliversalzburg]

Bug

When using an md-list-item that contains an md-list-item-text, the contents of the md-list-item-text can extend beyond the bounds of the md-list-item and text is not truncated.

CodePen and steps to reproduce the issue:

CodePen Demo which demonstrates the issue: https://codepen.io/anon/pen/PgmLYb

Detailed Reproduction Steps:

1. Open the CodePen
2. Inspect the width of the last list item. It should expand beyond the bounds of the screen.

What is the expected behavior?

The element has the same width as the containing list and the container text is truncated.

What is the current behavior?

The element is allowed to be as wide as its contents.

What is the use-case or motivation for changing an existing behavior?

Consistency between different md-list-item use cases and improving the usability of a list that contains items with a lot of text.

Which versions of AngularJS, Material, OS, and browsers are affected?

• AngularJS: 1.7
• AngularJS Material: 1.1.18
• OS: Windows
• Browsers: Chrome

[Splaktar]

You can use CSS to solve this (updated CodePen):

md-list-item-text {
  text-overflow: ellipsis;
  overflow: hidden;
}

You can also use clip for text-overflow if you don't mind possibly cutting letters in half.

[oliversalzburg]

My CodePen was not precise enough to showcase my actual issue. In our code it's not a span but an h3, (it's an .md-2-line setup) which seems to respond differently to your suggested solution: https://codepen.io/anon/pen/PgmLYb

[oliversalzburg]

I can't quite make sense of it yet, because the CSS adjustment has a different effect in our code still. We're currently using this to work around the issue:

.md-list-item-inner {
    max-width: calc( 100% - 32px );
}

Otherwise the list item always expands beyond the bounds of the containing mdList

[Splaktar]

It looks like you need to apply the same styles to the h3 as well (Updated CodePen).

[oliversalzburg]

I tried that and it still didn't fix the issue in our code. I went in again to compare and was able to break it again: https://codepen.io/anon/pen/KYJdBz

Now it seems like the menu is at fault. I believe the CSS you proposed should already be in place: https://github.com/angular/material/blob/master/src/components/list/list.scss#L347-L366

Sorry for having to revise so often :(

[Splaktar]

Sorry I didn't catch this earlier, but md-list-item-text (docs) has to be a class and not an Element.

Here's my updated CodePen with the new fix. I needed to add the following styles:

md-list-item>.md-no-style.md-list-item-inner {
  text-overflow: ellipsis;
  overflow: hidden;
}

Does this work for you?
If it does, do you think that we should add this to our styles?
https://github.com/angular/material/blob/6e019ad27c8cc2da455268efc88e3a7ccec5f998/src/components/list/list.scss#L338-L341

[oliversalzburg]

That works out perfectly in our code! Awesome. I'm not sure about the SCSS though. I'm having a hard time picturing the effects of that specific change.

[Splaktar]

OK, thank you for confirming that this is working for you. I'll just close this for now and if we get more people hitting this in the future, we can look into making a change to the List SCSS.