feat(mat-form-field / mat-label): we need the option to NOT truncate, a long/multi-line mat-label within a mat-form-field

[doublehelix]

Feature Description

We have a situation where we need a very short input (4 digits) but it has a very long label.
MUCH wider than the required input, and sometimes, much wider than the parent container/page.

Unfortunately, specifying a size on the mat-form-field not only resizes the input, it also resizes and truncates the label to the point of uselessness.

Examples:

In the first field below, we've set the mat-form-field style to width: 16.666667%

Small input with truncated label:

Updated styles with label width 600% to match the parent container (6 x 16.666667%)
This does make the label the full width, however, it's still not big enough to display the full text:

.mat-mdc-form-field .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-form-field-infix .mat-mdc-floating-label {
    width: 600% !important;
}

So, we added wrapping, to ensure the full label (and the trailing tooltip icon component within the label) is displayed:

.mat-mdc-form-field .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-form-field-infix .mat-mdc-floating-label {
    width: 600% !important;
    text-wrap: auto;
}

Unfortunately, this then overlaps the input, as the position of the label is hard-coded in the material styles...

Given the DOM of the component after rendering, I can't see any simple way to untangle this problem.

Obviously, on mobile devices this problem is exacerbated substantially:

Any suggestions would be great.

Use Case

No response

[doublehelix]

Seems related to angular/material#5331

[crisbeto]

Closing this since we can't realistically do it with the current design. The problem is that if we didn't truncate the label, the outlined form field's border would end up overlapping the text at some point.