[TextField] Long labels break layout

The textfield layout is not responsive when there are long labels.

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

Expected Behavior

According to Material Design, long labels should be correctly positioned within the available input space:

Current Behavior

• Two or more line labels are overlapping the underline line.

Steps to Reproduce

https://codesandbox.io/s/6xjr79vx3w

import React from 'react';
import TextField from '@material-ui/core/TextField';

class TextFields extends React.Component {
  render() {
    return (
      <form noValidate autoComplete="off">
        <TextField
          id="name"
          label="This is a long label because things"
        />
      </form>
    );
  }
}

export default TextFields;

Context

• All content is usually content managed, which means that the content editors could enter in label that may break the layout.
• If the enter in a label that is longer than the available space, example: “Do you have any association with a government entity?”, and the user is loading the page in an iPhone 5, there is no enough space to render the label in only one line.

Your Environment

Tech	Version
Material-UI	v1.3.1
React	v16.4.1
browser	Chrome

[ErikParso]

I found a workaround to trim label with ellipsis

.label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    right: 22px; //do not overlap icon
    bottom: 0px; //maximize container height so label wont be cut horizontaly
}

.label-shrinked {
    right: unset; //show complete label if shrinked
}

and in my component

...
<InputLabel
    classes={{
        root: styles.label,
        shrink: styles["label-shrinked"]
    }}
    id="label">

    {this.props.text}
</InputLabel>
...

result looks like this:

[kybarg]

@csantos1113 @oliviertassinari From specs: Labels should be short in other case use helper text instead