diff --git a/knowledge-base/wizard-wrap-step-label-text.md b/knowledge-base/wizard-wrap-step-label-text.md new file mode 100644 index 0000000000..37e8599c11 --- /dev/null +++ b/knowledge-base/wizard-wrap-step-label-text.md @@ -0,0 +1,71 @@ +--- +title: Wizard Text Wrapping +description: This article demonstrates how to allow text wrapping for step labels in the Telerik UI for Blazor Wizard component to ensure full text visibility. +type: how-to +page_title: How to Enable Text Wrapping in Wizard Step Labels - Telerik UI for Blazor +slug: wizard-kb-wrap-step-label-text +tags: telerik, blazor, wizard, css, styles +res_type: kb +ticketid: 1671064, 1574805, 1527700 +--- + +## Environment + + + + + + + + +
ProductWizard for Blazor
+ +## Description + +How to allow the `TelerikWizard` to show the full text of the step labels. For instance, step labels in my Wizard component are getting cut off, and I wish to display the complete text by wrapping it onto the next line. + +## Solution + +To wrap the Wizard step labels and display the full text, apply custom CSS styles. These styles allow the text to wrap in the Wizard steps and break words if necessary to fit the content within the available space. + +>caption Wrap Wizard step label text + +````RAZOR + + + + + + +

Welcome to the Wizard!

+
+
+ + +

The user is performing some actions...

+
+
+ + +

Thank you!

+
+
+
+
+ +

Wizard Value: @WizardValue

+ +@code { + private int WizardValue { get; set; } +} +```` + +## See Also + +- [Wizard Overview](https://docs.telerik.com/blazor-ui/components/wizard/overview) +- [Override the Theme or Apply Custom CSS Styles]({%slug themes-override%})