November 23, 2023

How to Add a URL Line Break if Your Link Is Too Long with CSS

Play Video

In this tutorial, we’ll explore how to add a URL line break in WordPress using CSS. This technique is essential when dealing with long hyperlinks that tend to overflow their designated containers, leading to a cluttered and unprofessional look on your website.


Please make sure you have the following installed and activated:

  • A theme or page builder that allows custom CSS (like Elementor)

Step-by-Step Instructions

  1. Navigate to the page or post where you want to fix the URL line break issue.
  2. Locate the hyperlink that is overflowing.
    Locate the hyperlink that is overflowing
  3. Open the advanced settings or custom CSS section of your page builder or theme.
    Open the advanced settings or custom CSS section of your page builder or theme
  4. Insert the following CSS code:
    selector {
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;

    Insert the following CSS code

  5. Save your changes and preview your page to ensure the hyperlink now fits within its container without overflowing.
    Save your changes and preview your page

Additional Information

This CSS solution ensures that the hyperlink remains functional and does not affect the URL’s usability when copied and pasted.

URL Line Break with CSS – Conclusion

With a few simple CSS tweaks, you can ensure that your URLs stay within their containers, maintaining a clean and professional look on your WordPress site.

Required Resources

Elementor Logo
Free Options
Credit to Web Squadron
Web Squadron is a popular YouTube channel dedicated to providing informative tutorials, tips, and insights on web development and design. With a strong focus on WordPress and website builders like Bricks Builder, the channel aims to help users of all skill levels, from beginners to advanced developers, create and optimize their websites. By offering easy-to-understand, step-by-step guidance, Web Squadron provides practical and valuable content.
How to Add a URL Line Break if Your Link Is Too Long with CSS
Welcome back!
Enter your Helwp credentials to sign in.

No Account yet? Sign Up

My Account
Give Feedback
Describe your feedback *
Rate Helwp
Problem *
Describe the problem
Want us to reply?
Your E-Mail
Affiliate Disclosure

At Helwp, we’re committed to transparency and honesty. Therefore, we want to inform you that some of the links on our website are affiliate links. This means that, at no additional cost to you, we may earn a small commission if you click through and make a purchase.

We only promote products or services that we genuinely believe in. These affiliate commissions help us to maintain the website and continue to provide you with free, high-quality WordPress content.

If you are interested in how you can support us even further, check out our support page.