In beta.11 and 12, long text in md-checkbox or mat-checkbox cannot be styled to wrap

Bug, feature request, or proposal:

Bug, beta.10 wrapped the same text

What is the expected behavior?

Long text between the md-checkbox tags should style via CSS and/or angular/flex-layout to a specified width and wrap within it

What is the current behavior?

Long text run across the page and “outside the browser”

What are the steps to reproduce?

Providing a StackBlitz/Plunker (or similar) is the best way to get the team to see your issue.
Plunker starter (using on @master): https://goo.gl/DlHd6U
StackBlitz starter (using latest npm release): https://goo.gl/wwnhMV

Put a 200 character text string inside your md-checkbox tags in your material.angular.io/components/checkbox/examples

Here is my code that spreads out beyond the browser, i.e. it displays as one line and not all of it shows:

    <div fxLayout="row" fxFlex class="w800px">
    <md-checkbox id="userAgreesTOS" name="userAgreesTOS" aria-labelledby="userAgreesTOS" formControlName="userAgreesTOS"
    i18n="user agrees to terms of service">By checking this box, I agree with the <a href="termsOfService.php"><span class="required">Terms of Service</span></a>
    that, in summary, say I  am responsible for all content of this posting, and I grant limited rights for display, data analysis and the
    use of cookies to make your future use of this service more automated.
    </md-checkbox>
    </div>

.w800px{ min-width: 400px; max-width: 800px; width:100%; }

What is the use-case or motivation for changing an existing behavior?

Text should wrap, and fit inside divs set by CSS

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Angular 4.4.3 MD-beta.11 Windows 10

Is there anything else we should know?

I use Angular Flex-layout

[jayoma]

I may be over-simplifying this… but the following works for me:

.mat-checkbox-label { white-space: normal; }

[mLaird]

@josephperrott I completed the upgrade to beta.12 and the problem persists. My other MD components work well, thank you.

I copied the checkbox from the MD checkbox documentation, upgraded it to mat-checkbox, added a lot of text, styled it as shown above, placed it inside my reactive form and outside my form - and the long text spreads out across the page and ‘outside’ the browser (if it could be seen) in all locations/instances.

I’m surprised you cannot reproduce the problem. Try the above. Or show me a working plnkr with the long text wrapped.