[FluentTextArea] Turn off text wrapping?

[Stephen-Lamb]

Hi, it is possible to turn off text wrapping with the FluentTextArea control? According to MDN there's a "wrap" attribute on the textarea control that can do this but I can't figure out how to do this with the FluentTextArea control. Can I do it using shadowRoot or something? Thanks.

[vnbaaij]

You could try to target the text area in the shadow dom indeed. No idea it it works, though.

[MarvinKlein1508]

Yes this can be achieved by CSS.

fluent-text-area::part(control) {
    white-space: nowrap;
}

You can also use a class for this like this:

fluent-text-area.nowrap::part(control) {
    white-space: nowrap;
}

And then in razor:

<FluentTextArea Class="nowrap" @bind-Value=value2 Label="With label:" />

@vnbaaij Stephen is right though there is an attribute called wrap which will only get applied to the fluent-text-area but not the actual textarea element itself. Is this something we should address or do we call it a day with the CSS approach?

[vnbaaij]

The Fluent-text-area web component does not have a thing like the additional attributes we have on the Blazor side. So setting wrap does not end up on the textarea unfortunately.
Think we have a low entry, easy solution with the CSS/class approach.

[Stephen-Lamb]

Thanks. The CSS approach is working well, though for my use case setting "whitespace" to "pre" is giving slightly better results.