Wrap Long Links with CSS
Developers have loads to think about when creative websites, and much of that is ensuring child elements don't stretch past the parent width. We worry about images, IFRAMEs, and other popular elements pushing past their parent width, but then we see a basic link with a long URL and we look down, just shaking our heads. Why doesn't the URL just break?
To prevent that issue, you can apply the following CSS:
/*
Problem:
<a href="">//someurl.com/a-really-really-really-really-really-really-really-really-really-long-url</a>
*/
a {
word-wrap: break-word;
}
Should this be a global setting for A elements, or simply something that we as developers should set? Surely this is an annoyance we shouldn't have to deal with, right?
![Regular Expressions for the Rest of Us]()
Sooner or later you'll run across a regular expression. With their cryptic syntax, confusing documentation and massive learning curve, most developers settle for copying and pasting them from StackOverflow and hoping they work. But what if you could decode regular expressions and harness their power? In...
![LightFace: Facebook Lightbox for MooTools]()
One of the web components I've always loved has been Facebook's modal dialog. This "lightbox" isn't like others: no dark overlay, no obnoxious animating to size, and it doesn't try to do "too much." With Facebook's dialog in mind, I've created LightFace: a Facebook lightbox...
![MooTools onLoad SmoothScrolling]()
SmoothScroll is a fantastic MooTools plugin but smooth scrolling only occurs when the anchor is on the same page. Making SmoothScroll work across pages is as easy as a few extra line of MooTools and a querystring variable.
The MooTools / PHP
Of course, this is a...
![Chris Coyier’s Favorite CodePen Demos]()
David asked me if I'd be up for a guest post picking out some of my favorite Pens from CodePen. A daunting task! There are so many! I managed to pick a few though that have blown me away over the past few months. If you...
You have to be carefull when using it in tables, because it causes the table to split the links all the time, it’s annoying. I prefer to set word-wrap on each case, most of time reseting this, is worst than setting.
Is tables the only place where it breaks? If so, a table a {} override seems like a good solution?
Remember though that if you have long words also they will also break if I remember correctly.
Chris, that would be true if you set the CSS style on the
body/pelement. This will only effect links, hence the setting of it on theaelement.I commonly run into this when dealing with dynamic content. I feel it should be automatically set for the anchor tag. We could just implement this in a reset included in the stylesheet that _most_ projects start off with. Double-edge sword I guess.
I have had success with
word-break: break-all;This example doesn’t working in Firefox 30.0.
After you get it working in Firefox, be sure to test Blackberry and Netscape next.
I’d rather [truncate them](https://github.com/varemenos/verepo/blob/master/src/layout/_truncate.scss) than use word-wrapping. Don’t ask why, personal choice.
what about the CSS ellipsis ? I find it more handy.
a { display: block; width: 180px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }Actually, I do exactly the opposite. I think you shouldn’t wrap links like that at all.
Imagine if you had a link at the end of a sentence that breaks to the next line. Now, you actually have two links. One to the right of your screen, and one to the left. But they are the same link. Confusing and ugly, in my opinion.
Better is to white-space: nowrap all the links in a content section, and provide a max-width (which could be dynamic for various screen sizes). And then probably make it visually attractive by letting it fade out or add ellipsis. Like @Symphony shows in the above comment.
Breaking a link in two parts feels kinda like breaking a word with a hyphen on a place where it isn’t logical/allowed.
Agree with @Jelmer. A progressive reveal pattern seems most useful. For ease of implementation, we should look not at the tag but using CSS ellip for style and the title attribute as a semantic way to provide additional information for a basic tooltip.
Similarly, we could lookup the site title dynamically and embed it where the really-really-long-a-tag-body-text-node-goes, passing more link juice through on the site title, assuming required use of the A href attribute and the link is not a nofollow link.
Consider my case on mobile devices, from where I get 80% of my traffic, I want the client to see the entire link and judge if it’s safe or not.
Since screen width is reduced on mobile, breaking the link on two lines doesn’t leave one right of the screen and other to the left, but actually makes it easier to be clicked.
This is just for my case, ellipsis doesn’t suit everywhere.
guys is there similar/simple (without JS) solution for multiline text ?