Material-ui: [SelectField] Overflowing text of selected item breaks into multiple lines

[arnekolja]

When selecting an item with a text larger than the select field, the value gets spread across multiple lines.

I cannot imagine a single situation where this is useful, so I'd recommend changing the default styles to include:

text-overflow: ellipsis;
overflow: hidden;
white-space: pre;

Feel free to propose a better solution :)

[treylon]

I ran into the same issue and arnekolja's arguments and solution seem good to me.

[tintin1343]

@arnekolja : This no longer happens.

When I select the longer text it looks like this:

However the solution you provided should work for anyone who has that issue.

I am closing this for now, as its no longer an issue.

[konoufo]

This is still a problem. Because the OP solution also hides the errorText.

[Jezternz]

Still a problem as of material-ui v0.15.2.

Was fixed using OP solution:
<SelectField style={{ textOverflow: "ellipsis", overflow: "hidden", whiteSpace: "pre" }} ... >...</SelectField>

[brucedlukens]

@tintin1343 This was closed prematurely. Still an issue. If you have spaces in a long name, it goes onto the next line (which will cover other components).

[Philin-Anton]

The problem appeared again, when we can wait for a fix?

[dcworldwide]

Still an issue. Selected item wraps to a new line if too long :(

[ccschneidr]

"overflow: hidden" does not solve the problem that the arrow button is overflow, also (besides breaking error text). I think the text will need an extra box which hides the overflow.