What's the best way to truncate a URL so that it fits within a layout

Question

What is the best way to truncate a URL when displaying it within a web page? I don't mean a link but literally displaying the URL as a value to the user, assuming that the text might be in a container of fixed width and you don't want to wrap or run outside of the container?

Is it better to truncate from the end, favouring the early part of the url:

eg. http/really.long/urlthaticantf...ere.html

Or place the '...' in the middle to favour the start and end of the link as the most value in terms of giving context:

eg. http/really.long/ur...aticantfithere.html

Also, what is a good rule of thumb when choosing how long to make the truncated URL? Should you be pessimistic and pick a likely wide-character such as capital 'M' and see how many of these fit in the layout? This tends to give really short URLs in general as most characters are much narrower than 'M'.

Or should you be optimistic and use a truncation that generally gives a good length but risk overrunning when the URL contains many large characters?

Answer 1

My preference is to display the most critical components of the URL. This is the file being requested and the domain of the request are what I consider critical, the intermediate path and the query string are things I consider non-critical.

So if you had http://www.Example.com/archives/2005/08/09/something.html, I would truncate it as www.Example.com/.../something.html

Of course, there are scenarios where this wont work. Take the URL of this page:

What's the best way to truncate a URL so that it fits within a layout

In this case, I would truncate the last portion of the URL to a reasonable number of characters (preferably breaking on a non-alpha), such as:

stackoverflow.com/.../whats-the-best...

Answer 2

Truncate the middle, for the reasons you gave.