Can't get hyperlinks to wrap

Design help General
1

Hi there,

I’m very new to Webflow and I’m having a lot of trouble trying to get my hyperlinks to wrap with the text. Instead, they just run off the page and you end up only being able to see part of the hyperlink.

The screenshot below is from the HiTOP Friendly Measures page.

Screenshot 2023-07-06 143445
Screenshot 2023-07-06 143445733×687 46.6 KB

I also have the same problem in my navbar where the navigation links are not wrapping and go off the screen.
Screenshot 2023-07-06 143725

Any help on how I can fix this would be greatly appreciated!

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

2

For your dropdown navigation menu items, just select one with the class you want, and explicitly set Breaking to Normal. You can further adjust it with a width to control how your menus appear overall.

Your hyperlinks contain email addresses and URLs, which don’t have natural breaking points for the browser to linebreak at. There’s no whitespace. You also have them inside of paragraphs, so they’re more difficult to target, you may need custom CSS to remedy that, and break on spaces.

Can you share a published site URL to the page?

3

Thank you very much @memetican! My navbar is now fixed.

The published site URL is HiTOP Friendly Measures.

What do you mean by needing “break on spaces”? I’m very sorry - I’m very new and custom CSS and all of this goes over my head.

Many thanks,
Brier

4

I don’t see the word break CSS style exposed in the designer, only the whitespace one which is humorously labeled “Breaking”.

Since your content is static and you have a kajillion Paragraph3 element, it’s probably easiest to target that element. It hits the subordinate a elements just fine.

Add this as a custom code embed somewhere on your page; top or bottom is best in order to locate it easily later. If you have this problem on many pages, place it inside of your nav component.

<style>
.paragraph3 {
    word-break: break-word;
}
</style>
5

You’re a godsent! This worked perfectly. Thank you so much, I really appreciate it! :slight_smile:

1 Like