mdChip text overflow

[denjello]

I know that mdChip is not ready for production, but I just noticed this strange behavior:

Short chips work fine, however chips that are too long to fit within the div width overflow off of the screen. Would it be a good idea to add md-maxlength logic to the md-chip?

Here is a screenshot of the behavior:

[zkimes]

I have run into an issue on a current project where md-maxlength would prove very useful due to length limitations in the table the chips are being saved to. I see that md-maxlength was the proposed solution for this issue, is that how you intend to resolve it?

[barryvdh]

How is this currently handled?

In 0.10.0: https://material.angularjs.org/0.10.0/#/demo/material.components.chips
Chips always fit
In 0.10.1-rc3: https://material.angularjs.org/0.10.1-rc3/#/demo/material.components.chips
Text is truncated

See Display an ordered set of objects as chips (with custom template). example.

[denjello]

The truncation effect of ... works in chrome, but not firefox 39.0 (linux), but there still does not seem to be a maxlength attribute.

[ilanbiala]

The ... shows up for me even when the chip text is just rock or able....I'm not sure how this functionality works, but it seems broken to me.

[ilanbiala]

@ThomasBurleson can we disable the truncation ... manually until this issue is fixed, because I'm seeing things like

which should instead be "blue", "E", "Ea", "Eat"...so this is really an issue. Can you point out where the truncation happens in the code?

[ilanbiala]

@ThomasBurleson @rschmukler @robertmesserle @typotter here's the issue:

.md-chips .md-chip .md-chip-content {
    display: block;
    padding-right: 4px;
    float: left;
    white-space: nowrap;
    max-width: calc(100% - 31px);
    overflow: hidden;
    /* text-overflow: ellipsis; */ /********* THIS LINE CAUSES UNNECESSARY ELLIPSES ********/
}