WordPress – How To Get A Long URL to Wrap

Wordpress

WordPress

I’ve been having a challenge with a couple of my blog sites where long URLs have not been wrapping and running off the side of the page to the right out of the visual range, which has been pointed out by my site readers.   This fix was much easier than the long URL in a table problem, but Well,  I thought I would share, as well.  Hopefully, others will find it useful.

Code Update Steps

The fix requires a change to the CSS code of your site.  To make the change :

  • Navigate to Appearance > Customize > CSS and add input code
  • Add the CSS URL Wrap Code
  • Publish CSS Change

Appearance Navigation To Customize Menu

Appearance Navigation To Customize Menu

Appearance Navigation To Customize Menu

CSS Navigation Menu

CSS Navigation Menu

CSS Navigation Menu

 

Empty CSS Code Screenshot before Changes

Please note that the table long URL code was added in a previous post.  So, we will be adding the new code just below the existing CSS code modifications.

Customized CSS With URL Wrap

Customized CSS With URL Wrap

CSS change code wrap a long URL on the table

a {
word-wrap: break-word;
}

Customized CSS With Long URL Wrap Code Added

Wrap code for Long URL's

Wrap code for Long URL’s

Publish CSS Changes

Publish CSS Changes

Publish CSS Changes

Related References