Tutorial: How to Break Long Link Lines in Elementor (Mobile-Friendly)

When we insert very long links in the Elementor, especially in texts or buttons, it is common that on cell phones they exceed the width of the screen, harming the user experience. To do this, I'll teach you how to break lines of long links, long strings, etc.

To fix this simply, you can use a Custom CSS directly in the widget or container.

Step by step:

1. Open the Elementor editor and select the widget or container where the link is inserted.
2. Go to the tab Advanced → Custom CSS (available in Elementor Pro).
3. Paste the following code:

selector { word-break: break-word; }

4. Click on To update and view on mobile: now long links will automatically adjust, breaking the line without leaving the screen.

💡 Tip: If you want to apply the rule to an entire container, simply add the CSS to it. This way, all text and links within it will inherit the behavior.

🎥 Video Tutorial

To see the process in action, watch the video below where I show you how 1 minute and 30 seconds How to apply this tweak in Elementor: