How I Enabled Multiline Text in Buttons on Wix Studio Editor (Especially for Mobile Breakpoints)

How can I make button text break into multiple lines in Wix Studio Editor, while ensuring proper display on mobile breakpoints?

I’ve been struggling for some time trying to make the text inside a button break into multiple lines in the Wix Studio Editor. By default, button text tends to stay on a single line, which isn’t ideal when you have longer text or need specific formatting.

The Main Challenge:

One of the biggest hurdles was dealing with mobile breakpoints. On smaller screens, the button text would hardly fit within the available space, leading to layout issues and a poor user experience.

The Solution:

I added a custom class to the button component and applied the following CSS:

.multiline_button > span > span:first-of-type {
    overflow: visible;
    text-align: left;
    white-space: normal;
}

Explanation:

• .multiline_button: This is the custom class I assigned to my button. You can name it anything you like.
• > span > span: This selector targets the first span element that is a child of another span, which is itself a direct child of the button. This drills down to the specific span that contains the button’s text. you can check your DOM after published to get IMPORTANT: the right element, it must be the __label span, if you use the icon before the text, use last-of-type selector
• overflow: visible: Ensures that any text overflow is visible rather than hidden or clipped.
• text-align: left: Aligns the text to the left. You can adjust this based on your design needs.
• white-space: normal: Allows the text to wrap onto multiple lines, which is the key property for breaking the text.

Addressing Mobile Breakpoints:

To tackle the issue of text not fitting on smaller screens, I defined specific breakpoint rules in my CSS. This allows for adjustments to be made at different screen sizes, ensuring the button text adapts gracefully.

@media (max-width: 600px) {
    .multiline_button > span > span:first-of-type {
     [...]
    }
}

Steps to Implement:

1. Assign a Class to Your Button:

• In the Wix Studio Editor, select your button.
• Go to the properties panel and add a class name, for example, multiline_button.

2. Add the Custom CSS:

• Navigate to your site’s CSS file or the custom CSS section in the editor.
• Paste the CSS code provided above.

3. Define Breakpoint Rules:

• Add media queries to your CSS to handle different screen sizes.
• Adjust styles within these breakpoints to ensure optimal display on mobile devices.

Outcome:

After applying this CSS and setting up breakpoint rules, the text within the button now breaks into multiple lines and adapts to different screen sizes, you can see it without publish

Final Thoughts:

I hope this helps anyone who’s been facing the same challenge. Dealing with responsive design can be tricky, but with the right CSS tweaks, you can achieve the desired effect. If you have questions or further suggestions, please feel free to share them!