WordPress – How To Get A Long URL to Wrap in a Table

Wordpress

WordPress

I’ve been having a challenge with a couple of my blog sites where long URLs have not been wrapping when enclosed in the table.  Therefore,  the URL’s run off the side of the page to the right out of the visual range.  I even have gotten a few comments from my site visitors saying that I ought to try to fix the Long URLs leaving the page.   Well, after some investigation and some trial and error, I have managed to fix the problem. So, I thought I would share the solution in case anybody else would like to save themselves a little time correcting the long URL problem in the future.

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

Customizing CSS Before Changes

Customizing CSS Before Changes

 

CSS change code wrap a long URL on the table

table a {

overflow-wrap: break-word;

word-wrap: break-word;

-ms-word-break: break-all;

word-break: break-all;

word-break: break-word;

-ms-hyphens: auto;

-moz-hyphens: auto;

-webkit-hyphens: auto;

hyphens: auto;

}

Customized CSS With URL Wrap Table Code Added

Customized CSS With URL Wrap Table Code

Customized CSS With URL Wrap Table Code

Publish CSS Changes

Publish CSS Changes

Publish CSS Changes

Related References

This entry was posted in All categories, Blogging, Publishing, wordpress and tagged , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , . Bookmark the permalink.

One Response to WordPress – How To Get A Long URL to Wrap in a Table

  1. Pingback: WordPress – How To Get A Long URL to Wrap | Writing and The Written Word

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

w

Connecting to %s