Single line ellipsis in Material-UI Select and option Component

Question

I have a TableHead Component with multiple columns. One of them is a <Select> so that you can filter the content of the table (the value is one of 4 statuses in my case). I want to add an ellipsis at the end of the options' string if it's longer than it's container.

My problem is that material-ui's styles are wrapped around the Select component so whether I do it withStyles or by inserting styles inside the tag, it doesn't work.

I checked and with material-UI you can have noWrap and textOverflow: "ellipsis" should work but I can't quite figure out the right combination.

My expected result is that if the string is larger than it's parent, it displays the Ellipsis. So instead of this:

I'd like a simple "Contrib..." (The svg from Material-UI Select component overlays the text...)

I tried many different options but none of them do anything so clearly I must be doing something wrong. I tried changing colors to see if my styles were being affected which they are.

<Grid item sm={2} lg={2} style={{display: 'flex', alignItems:'center'}}>
    <Select native style={{ textOverflow: "ellipsis", overflow: "hidden", whiteSpace: "pre" }}
            value={this.state.status}
            onChange={this.handleChange.bind(this, Filter.Status)}>
        {Object.keys(StatusFilter).filter(key => !isNaN(Number(StatusFilter[key]))).map(item => {
            return (<option key={item} value={StatusFilter[item]}>{this.getStatus(StatusFilter[item])}</option>);
        })}
    </Select>
</Grid>

Answer 1

Two things here, first a native select has no way to add ellipsis since text-overflow is only for block elements. See Is it possible to make text-overflow:ellipsis for select with css only?

In case you want to explore that way, there is also inputProps that is an object you can use to pass properties to the underlying input. So if you want to add a style to the native input you can:

   <Select native inputProps={{ style: { width: 100 } }}>{...}</Select>

On the other hand, if you remove the native property the ellipsis should be applied by default if the select box is smaller than the text.

Answer 2

In my case ellipses were missing even on non native Select component, and that was because display: flex style was applied over 'MuiSelect-root' component.

Replace that - i.e. with display:block - and ellipsis will be there for you.