How to truncate long URLs [Tested on SMF 1]

[Biology Forums]

Let's pretend someone posts a long link:

https://www.google.com/search?q=smd&oq=smd&aqs=chrome..69i57j0l2j5.2737j0&sourceid=chrome&ie=UTF-8#q=smf

This could potentially break the layout of your forum. To prevent this from happening, I added the following to my style.css sheet:

Find

Code Select Expand

.post, .personalmessage
{
width: 100%;
overflow: auto;
line-height: 1.3em;
}

After after

Code Select Expand

.post a, .personalmessage a
{
display: inline-block;
white-space: pre;
overflow: hidden;
text-overflow: ellipsis;
max-width: 24em;
vertical-align: bottom;
}

This should trim that URL and display it like this:

https://www.google.com/search?q=smd&oq=smd&aqs...

Hope this helps

[Colin]

Thanks!

[Antechinus]

ROFL. A bit slow off the mark. I gave a bloke a solution for this ages ago over at Dziner, and I may even have suggested it for use in 2.1 (can't remember). I'm fairly sure I mentioned it somewhere on this site, as another site I made a custom interface for some time back has been running this live too.

Anyway, you might want to add similar css to deal with links in sigs, and long thread titles. The same principle can be applied anywhere. Particularly useful with mobiles, if you use media queries to set different maximum widths for different devices.

[Werldklass]

Thanks, Liam_michael.

[dianemcmillan]

Wow amazing! I have a program that contains long lines of url and I find it difficult to truncate it, but thanks for the help. Good job!