Material Radio Label Content Wont Apply Text Wrap CSS Angular

Question

I have a radio group with a fixed width and I would like the button labels to wrap. I have tried adding classes to every part of the html and adding "white-space: normal" to the elements but it just ignores it. How can I make it work?

Here is an example of where I am at

If I add this CSS to the top level styles.scss file it works as intended.

.mat-radio-label-content {
  white-space: normal;
}

But I want to avoid this and keep the css only relevant to the specific component and not app wide.

Answer 1

Wrap your label text in a span with a selector.

    <style>
        .wrap-mat-radio-label {
            white-space: normal;
        }
    </style>

    <mat-radio-group>
        <mat-radio-button>     
            <span class="wrap-mat-radio-label">
                {{ season }}
            </span>
        </mat-radio-button>
    </mat-radio-group>