List text does not properly truncate overflow with an ellipsis

[ronnievsmith]

Too lazy to create a codepen but it's there. Issue is that when the secondary text is long/verbose enough, it won't wrap as expected, it just renders out as one line forcing a nasty horizontal scroll. I noticed it implementing mdc-list-item__secondary-text with a long sentence.

Web Inspector shows the cultrip: white-space: nowrap; on .mdc-list-item

Toggling that line off fixes it.

[acdvorak]

Ugh, text-overflow: ellipsis is such a fickle beast...

It looks like it's a problem for primary text too:

From the screenshot above, I see two different problems:

1. We're setting text-overflow: ellipsis on mdc-list-item, which won't work because A) mdc-list-item is display: flex, and B) mdc-list-item can have multiple lines of text.

   According to MDN:

   The text-overflow property only affects content that is overflowing a block container element in its inline progression direction (not text overflowing at the bottom of a box, for example).

2. mdc-list-item__graphic should have flex-shrink: 0, but it doesn't, so it gets squished when the text is too long. (I filed #1941 for this.)

Here's a workaround until we figure out whether it's possible to fix this in MDC Web:

<span class="mdc-list-item__text">
  <span class="ellipsis">
    Photos Photos Photos Photos Photos Photos Photos Photos Photos Photos Photos Photos Photos Photos Photos
  </span>
  <span class="mdc-list-item__secondary-text">
    <span class="ellipsis">
      Jan 9, 2014 Jan 9, 2014 Jan 9, 2014 Jan 9, 2014 Jan 9, 2014 Jan 9, 2014 Jan 9, 2014 Jan 9, 2014 Jan 9, 2014 Jan 9, 2014
    </span>
  </span>
</span>

and:

.ellipsis {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

Using the workaround above (and adding flex-shrink: 0 to __graphic), I get this:

Thanks for filing this!

[ronnievsmith]

Glad to contribute. This short CSS below is how I worked around it. Simply apply my-list (or whatever class name you want to give it) as follows to the <ul> wrapper element.

.my-list .mdc-list-item__graphic {
    /*background:green;*/
    height:2.8em;
    width:2.8em;
    border-radius:50%;
    text-align: center;
    margin-right: 18px;
}
.my-list .material-icons {
    font-size: 2.8em;
    vertical-align: middle;
}
.my-list  .mdc-list-item {
    white-space: normal;
}

[ronnievsmith]

OK, I think I got a solid work-around now (for the two-line flavor). Had to set height:auto and margin-bottom:1em on the li. The items were stacking atop one another on mobile view.

.my-list .mdc-list-item__graphic {
    /*background:green;*/
    height:2.8em;
    width:2.8em;
    border-radius:50%;
    text-align: center;
    margin-right: 18px;
}
.my-list .material-icons {
    font-size: 2.8em;
    vertical-align: middle;
}
.my-list  .mdc-list-item {
    white-space: normal;
}
.my-list.mdc-list--two-line > .mdc-list-item {
    height: auto;
    margin-bottom: 1em;    
}

[marioavs]

In order to include mdc-list in a flex layout, some elements need to be display: block. These are the changes needed to make the list fit properly in the parent layout (max-height value is for two lines secondary text dense list, overriding it as max-height: none, will allow the list item to grow), any width value is needed:

.mdc-list-item__text {
  @include mdc-typography-overflow-ellipsis;

  display: block;
  flex: 1;
  width: 100px;

  .mdc-list-item__secondary-text {
    display: block;
    line-height: 1.25em;
    max-height: 2.5em;
    overflow: hidden;
    white-space: normal;
  }
}

[Mississippi-coder-cloud]

[default] aws_access_key_id = aws_secret_access_key =