How should one break long urls in event content? aka too wide tables

amr ical events list, Css, How To, Notes

One uncontrollable part of allowing users to create events is that they may not be “good” about entering links.  If they enter a full url that is quite long, this could cause the calendar listing content to overflow.  How this appears visually depends on your theme’s css and your browser.   In IE it could be this:

Loooong Urls

The ical-events-list plugin automatically makes links ‘clickable’ if they are not already.  This is desirable most of the time, however if the link is really long, then we have the long url problem, which is how I came to look at this question.

There are a range of possible answers from getting the table to deal with it, the cell to deal with it and avoiding if by modifying the link text.

Modifying the link text

Possibly the most stable version in the long run with the downside that users cannot cut and paste the link text as url, they have to know to select the “shortcut” or link address.

For the plugin, this is probably the safest answer as I prefer to let the theme css work so that the styling is consistent with the theme as much as possible.  It will also not interfere if the link is not too wide, or is not a url.

Version 3.0.2 will trim the event hyperlinks:

Trimmed urls

Coping with a wide table

A suggestion from 456bereastreet.com

Css3 options:

  • word-wrap: break-word has some browser support
  • word-break: (normal, break-all, keep-all) aimed at dealing with mixed character sets.  Random Break Point.

Resources: