[Chip] Limit text length and truncate it with ellipsis

[felipesilvati]

• I have searched the issues of this repository and believe that this is not a duplicate.

Summary 💡

The <Chip /> could receive a maxLength property that truncates with ellipsis

Examples 🌈

<Chip label='My Very Long text that needs to truncate' maxLength={2} />

Renders My...

Motivation 🔦

Avoids writing string truncate functions outside of this component.

[mbrookes]

@felipesilvati The best approach currently is to apply a max-width CSS property on the chip: #18708

Duplicate of #18587

e.g.

<Chip style={{ maxWidth: 100 }} />

[hadasmaimon]

It is very good,
But it would be nice if we could add a title

@oliviertassinari How do we add the html title attribute to a chip?
ie:

<Chip title={chipTitle} /> as <div title='allText'>your text</div>

Nice! It already exists, thanks!

[wishtree-rpatel]

@felipesilvati I would be great if we can display tooltip on chip if elapses are present, don't know how to do that