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

Question

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!

score 3 · Accepted Answer · answered Jul 27 '18 at 16:29

3

::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;
}

answered Jul 27 '18 at 16:29

Rijvi Rajib

1,080
2
11
27

2

While ng-deep is deprecated, there is no specified removal time: https://angular.io/guide/deprecations#index – user12861 Apr 10 '20 at 19:00
6

Also, the suggested ViewEncapsulation.None technique is fraught with difficulties much more than ng-deep, because you will now leak your styling throughout your site. – user12861 Apr 10 '20 at 19:01

score 1 · Answer 2 · answered Feb 25 '21 at 15:17

wrap text:

<textarea></textarea>

<textarea
  matInput
  #fileName="ngModel"
  name="fileName"
  [(ngModel)]="action!.params.file!.originalName"
  type="text"
  autocomplete="off"
  autocapitalize="off"
  readonly
  required
  [matTooltip]="action!.params.file!.originalName"
></textarea>

overflow-clip text:

<input/>

<input
  matInput
  #fileName="ngModel"
  name="fileName"
  [(ngModel)]="action!.params.file!.originalName"
  type="text"
  autocomplete="off"
  autocapitalize="off"
  readonly
  required
  [matTooltip]="action!.params.file!.originalName"
/>

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

2 Answers2

Linked