Hand-selected, original logos for sale
Once it's sold, it's gone!
Forum Very long URLs in forum text


DESIGNER

Ortega Graphics
2019-04-19

Hello,

In the LogoGround forum, we sometimes see very long URLs within the body text of some topics. These long URLs break the flow of the page slightly (overflow) and in some extreme cases the dreaded horizontal scrollbar appears (particularly if the window is not at full size). This, of course, is not the fault of the users that simply copy/pasted a URL as it was on their browser (search engines often add extra unnecessary parameters in the URL; also, some extended characters get encoded by the browser which triples the length for those characters within the URL).

There is an fast and easy solution that the admins can apply to the forum code so that those very long URLs will be automatically broken into smaller chunks; a fairly simple set of CSS rules that could be added to the existing bodytext14 class. This is very easy to implement and it works in most modern browsers.

There are many pages that explain this. Here's one of them:
https://css-tricks.com/snippets/css/prevent-long-urls-from-breaking-out-of-container/

Thank you,

Ortega Graphics



ADMIN
ajleroux
2019-04-20

Many thanks Ortega Graphics. I didn't realize that there was such an easy fix. I made the change to the CSS and it seems to work perfectly in Firefox, but not in Chrome. I'll test some changes.



DESIGNER
Ortega Graphics
2019-04-20

Hi André,

Thank you for the fast implementation. But you didn't include all proposed rules. Every one of them have a purpose. One of the ones that I tested (locally) made a huge difference (word-break: break-all;) and it worked in Chrome along with the rest of your existing CSS. I just tested again and it still works.

So, as of now, you only included the first two proposed CSS rules. If you add the next three, you will see a difference (and you can probably ignore the last four about hyphens).

Hope this helps,

Ortega Graphics



DESIGNER
Ortega Graphics
2019-04-20

By the way, after the implementing the additional CSS rules, you will have to change the width of the first cell inside the table within the top grey ribbon; otherwise, the Forum link at the top (right before the topic title) will also be broken (currently there is not much space for that word and thus, it presently overflows the existing cell).

Ortega Graphics



DESIGNER
Ortega Graphics
2019-04-20

Actually, come to think of it, all those new CSS rules should only be applied to the actual links ("a" tag, with or without a style) within the text of forum posts. This way, the CSS rules won't affect any other overflowing text (including the aforementioned case).

Thank you,

Ortega Graphics



ADMIN
ajleroux
2019-04-21

Many thanks Ortega Graphics. CSS updated. I left out one of the rules, "word-break: break-all;" based on the comments in the code. Seems to work fine without it, although you may not be able to see it on LogoGround right away due to the server cache holding on to the old CSS file for an hour or so.

I agree, probably safest to apply to links.

In a test it did indeed break the forum link as you predicted. I fixed that, but there may be other instances of the same issue. If you spot any please let me know.



DESIGNER
Ortega Graphics
2019-04-21

Everything seems to work as expected, but I'll keep an eye for any issues as requested.

Thanks again for the fast implementation on this,

Ortega Graphics



DESIGNER
Ortega Graphics
2019-04-21

Spoke too soon. LOL. The aforementioned predicted issue is happening here: https://www.logoground.com/forumnew.php

This might happen elsewhere if a link is placed in a smaller container (overflow). Maybe a specific style for links within the actual posts would be more appropriate (instead of all links), this is the beauty of specificity in CSS. The PHP code could add this specific style in the same line of code that adds the nofollow bit. Just an idea.

Thank you,

Ortega Graphics



ADMIN
ajleroux
2019-04-22

Thanks Ortega Graphics. Fixed.

Yes, specificity in CSS is useful, but can also lead to bloated CSS files. The main LogoGround CSS file is already 3331 lines long and 69KB. Missing the days when web sites were created in notepad, table layouts and an animated GIF envelope for a "Contact us" button. Never thought I'd miss animated GIF envelopes :)

In this case I think it is safe to apply the rule to all links. We test any new pages that are added to the site and will spot overflow issues as they occur.



DESIGNER
Ortega Graphics
2019-04-22

Always happy to be able to help.

And yes, the early nineties were simpler times in terms of web design and development. There are many things to miss from those years, but one thing I don't miss is the blink tag which was overused back then.

Ortega Graphics


Login or register to post.

 

10 posts
150 views
Last post on 2019-04-22


Jump to last post

Post a reply

Start a new, separate discussion

Can we make LogoGround better for you?

Suggestion box Report a bug


© Copyright 2011-2019, Graphics Factory CC. All rights reserved. Use of this web site constitutes acceptance of the  User Agreement & Disclaimer. LogoGround.com is a division of Graphics Factory CC, SA., Reg Nr. 2008/121028/23

God First Policy