[SOLVED] Angular Material mat-form-field Placeholder text on multiple lines

Angular Material mat-form-field Placeholder text on multiple lines

I use a regular mat-form-field with a textarea inside. My issue is that the placeholder text for this Textarea is rather long. In mobile, where space is more limited, this placeholder text is truncated by Angular Material with an ellipsis.

I would like to have the placeholder text adjust to space restrictions by shifting down onto the next line. So, for example, instead of:

This is a really long text and it cannot fit on a single li...

I would like:

This is a really long text and it cannot fit on a single
line

I have already tried various approaches to changing the CSS of the mat-input-placeholder and mat-input-placeholder-wrapper, with no success. I know that part of the solution involves changing the text-overflow property (below), but I can't get the other parts.

::ng-deep .mat-input-placeholder {
  text-overflow: clip;
}

Can anyone help?

Thanks!

Solution

::ng-deep is deprecated.

Instead, you should use ViewEncapsulation and control the CSS inside the component.

@Component({
  selector: 'app-example',
  templateUrl: './example.component.html',
  styleUrls: ['./example.component.css'],
  encapsulation: ViewEncapsulation.None,
})

For placeholder (remove placeholder from element):

<mat-placeholder style="white-space: normal;">{{question.label}}</mat-placeholder>

Then add your CSS styles without ::ng-deep in the example.component.css

.mat-form-field-label {
  white-space: normal;
}

textarea.mat-input-element {
  padding: 0px 0;
  margin: 5px 0;
}

.mat-input-placeholder {
  white-space: normal;
}