diff --git a/packages/mdc-form-field/README.md b/packages/mdc-form-field/README.md index fe466094ebe..9fee6020603 100644 --- a/packages/mdc-form-field/README.md +++ b/packages/mdc-form-field/README.md @@ -76,6 +76,22 @@ By default, the input will be positioned before the label. You can position the ``` +### Nowrap + +If the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class: + +```html +
+
+ +
+ ... +
+
+ +
+``` + ## `MDCFormField` Properties and Methods Property | Value Type | Description diff --git a/packages/mdc-form-field/_mixins.scss b/packages/mdc-form-field/_mixins.scss index d901d43a8e8..d2f286e2b75 100644 --- a/packages/mdc-form-field/_mixins.scss +++ b/packages/mdc-form-field/_mixins.scss @@ -55,6 +55,16 @@ } } + .mdc-form-field--nowrap { + > label { + @include feature-targeting-mixins.targets($feat-structure) { + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; + } + } + } + .mdc-form-field--align-end { // stylelint-disable-next-line selector-max-type > label {