Breaking URLs into multiple lines

[666admin]

I'm not sure this is a question for HTML or CSS, maybe both, I'd guess CSS more over than HTML, but I'm willing to take in any suggestions.

This can only really be summarized through image examples of what I'm talking about.

Alright, so first an example I drew of what I'm talking about: [i.imgur.com...]

Now a live example on an imageboard:
[i.imgur.com...]

So obviously, URL's (I have them set under .a as usual in my CSS) need to be broken down into multiple lines so that they format besides the images instead of directly under them.

I'd really appreciate some help on this, thanks in advance.

[lucy24]

?! Why do you need a naked url? If it's long enough to disrupt the page layout, better to put it behind shorter text.

Resolving urls with any kind of whitespace depends on the browser. It's not safe to do it by design.

[666admin]

@lucy24

Thanks for that reply, but I have absolutely no clue what you're trying to tell me, please rephrase your answer? Thanks in advance.

[penders]

So, the long URL (for display) is not wrapping because there is (naturally) no white space in it. I'm guessing you want the URL displayed for copy 'n' paste ability? But as lucy24 suggests, is this really necessary? I would have said the more conventional/easy way to copy the URL is to right-mouse on a link and select "Copy link address" (Chrome) or "Copy link location" (Firefox) or "Copy shortcut" (IE). Trying to manually copy a URL is prone errors.

Or, display the URL in a text box (perhaps even remove the borders etc.) and allow the text box to scroll (easy to cut 'n' paste too).

[666admin]

Hey penders, thanks for helping me out in the past with that PHP application I was writing (appreciated).

Anyways, basically as you said, I want it to wrap, that's pretty much it. I want the URL to remain functionally clickable while breaking into new lines to wrap around the image and not go under it.

function MakeClickable($txt) {
/* Make http:// urls in posts clickable */
$txt = preg_replace('#(http://|https://|ftp://)([^(\s<|\[)]*)#', '<a href="\\1\\2">\\1\\2</a>', $txt);
return $txt;
}

[666admin]

You know what would be really smart? Actually, this is a really good idea. If I figured out a way to essentially (I'm no PHP expert so I might need some help with this) make URL's like this:

google.com/blahblalgb/lfsfsl/fgsgsdgdsgsl.html

Become:

google.com/...html

onclick they would direct me to:
google.com/blahblalgb/lfsfsl/fgsgsdgdsgsl.html

Maybe that's just a pipedream though.

[aakk9999]

Just use anchor text: google.com/...html

<a href='http://google.com/blahblalgb/lfsfsl/fgsgsdgdsgsl.html'>google.com/...html</a>

This is what Lucy24 was trying to tell you in her post above.

[lucy24]

Do you want users to click on the url and be taken somewhere, or do you want them to cut and paste the url for use somewhere else? (Like collections of smileys that welcome hotlinks.)

If all your users are doing is clicking on the URL, there's no earthly reason to display it in full. URLs are ugly. Heck, even these Forums don't let URLs run around naked, and we're used to seeing 'em ;)

[666admin]

Fixed it myself, a mate of mines helped me code a URL cutting function in PHP.

Peace. Thanks for the help, penders.

[666admin]

Actually nevermind, that didn't provide what I needed and it looked kinda badly.

Look, users are posting these links, not me. I run a forum.

Anyways I just want links to break around images instead of go under them is all.

[lucy24]

Could you swipe the code they use in php/bb3? Overlong urls are automatically shrunk, but remain clickable. Or, hey, something like what they do here :)

I really don't think inserting line breaks-- or even spaces, which would allow natural wrapping-- is a safe option. You want them to remain active clickable links, right?

[penders]

Just trying to get my head around this... users are posting/typing long URLs in the forum. The forum software is turning these into clickable links, but they are too long for display? Or are they not even clickable?

What was wrong with the URL cutting function your mate wrote?

[rocknbil]

If I figured out a way to essentially (I'm no PHP expert so I might need some help with this) make URL's like this:...

This is precisely correct, when it doubt, look at what the "big dogs" do. Your basic logic would be one of these two ways:

- Store the URL in two variables, one for the link itself, one for the text of the link
- check URL length
- If it exceeds your preset length, use some substring method to truncate it and append it with ...

<a href="some-extremely-long-url">Some-extremely-long....</a>

The second method is similar, except you'd use something like the page title for the text:

<a href="she-ll-be-comin-round-the-mountain-when-she-comes-when-she-comes">She'll Be Comin' Round the....</a>

This is pretty basic in any programming language, but if the second method is used you can split the title up on spaces so you can use whole words.

[666admin]

@lucy24

Shruken URL's look kind of ugly to me, me and a friend already wrote a more efficient function to do that. It doesn't look that good. Thanks for the suggestion though.

@penders

Hey penders, essentially instead of wrapping around the image and breaking down into multiple lines around it, they go below the image due to their length.

@rocknbil

I'd prefer them to just break into multiple lines (while staying clickable), but thanks for the suggestion.

[rocknbil]

Then you'd substring it and add <br>'s in there. :-P

[Fotiman]

Give those links a CSS word-wrap property with a value of break-word.

[666admin]

@rocknbil

Tried that, I don't like the way it looks, I'll explain why.

Simply because it isn't dynamic, if I've got a box that's 500px wide and I've got links breaking at 100px it doesn't work well for me, I think you get what I'm saying.

@Fotiman

More info, please?

[Fotiman]

[w3schools.com...]

There's also an example:

[w3schools.com...]

But essentially, you would do something like this:

a {
  word-wrap: break-word;
}

You may want to make the selector more specific so as to only apply to the particular links that you mention above.

[666admin]

Hey Fotiman, sorry about taking so long to reply, I tried that but sadly it still doesn't wrap around the image. Any more ideas?

[lucy24]

For legacy reasons, UAs may also accept ‘word-wrap’ as an alternate name for the ‘overflow-wrap’ property. However this syntax not valid.

Darned if I know what "legacy" they're talking about [w3.org] though, since I can't find the term in either 2 or 2.1.

An unbreakable "word" may be broken at an arbitrary point if there are no otherwise-acceptable break points in the line. Shaping characters are still shaped as if the word were not broken, and grapheme clusters must together stay as one unit.

I really ought to understand that, but I don't :(

Edit after looking at Fotiman's links:

Gee. It would be nice if the different parts of w3c talked to each other, wouldn't it? ;)

I suspect the reason the link isn't wrapping is that it doesn't have to. It has an alternative, which is to drop down out of the way of that image that's making things so crowded. So you'd also have to glue the link to its original location.

[Skier88]

You're looking for

word-break:break-all;

- only problem is it doesn't work in Firefox or Opera.

However, I think that shortening the URL is a better solution than forcing it to wrap as you say. Remember that a URL is a single word - logically it makes sense to try to keep it on the same line. Failing to do that I would just leave it as-is and let the user decide whether they care how their post looks enough to use a url shortener.

[666admin]

Skier88 if I were to hypothetically use a URL shortener it would take away alot of usability from my site as well it wouldn't fix the same issue when posting extremely long words or phrases.

Thanks for the suggestion though.

[lucy24]

if I were to hypothetically use a URL shortener it would take away alot of usability from my site

I can't help feeling there's something you're not telling us. Ordinarily, people would be looking for any alternative to having long, ugly, unwieldy URLs cluttering up the page. But here it seems to be very important for the entire URL to remain visible to the naked eye.

as well it wouldn't fix the same issue when posting extremely long words or phrases.

That's a different issue. People can't help the size of an URL. But if they choose to use mile-long words, surely that is their problem and not yours? And you'd have to really try to come up with a word so long it can't fit in an ordinary column. The screen shot you posted does not suggest lengthy discussions of antidisestablishmentarianism.*


* I will not go the Mary Poppins route. I will not, I will not, I will not. Even if it is marginally more probable. Let 'em use hyphens.

[Fotiman]

How about this:

<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<style type="text/css">
#container {
  border: 1px solid red;
  width: 300px; /* Apply a constrained width */
}
img {
  float: left;
  width: 100px; /* This has to match the sidebar div left margin */
  height: 250px;
}
.imgSidebar div {
  margin-left: 100px; /* This has to be at least the img width */
}
a {
  word-break: break-all;
}
</style>
</head>
<body>
<div id="container">
  <img src="foo.png">
  <div class="imgSidebar">
    <div>
      Text here. Text here. Text here. 
      Text here. Text here. Text here. 
      Text here. Text here. Text here. 
      Text here. Text here. Text here. 
      Text here. Text here. Text here. 
      Text here. Text here. Text here. 
      Text here. etc...
    </div>
    <div>
      <a href="#">http://www.THIS_IS_NOT_BELOW_THE_IMAGE.example.com</a>
    </div>
  </div>
</div>
</body>
</html>

Note, you may want to add something to clear the floated image. In this example, I've given the image a specific width and height just to show the boundaries and show that it extends outside of the container in most browsers (because it is floated).

[666admin]

Fotiman awesome, thanks for the code. I'm going to play around with it, although the container and the image need to be dynamic (big issue).

[penders]

You're looking for word-break:break-all; - only problem is it doesn't work in Firefox or Opera.

Why not

word-wrap: break-word;

(although not strictly standards compliant) as Fotiman suggested initially? Doesn't this do the same thing (at least in this instance) and provide cross-browser support, including IE6+? Or am I missing something, what is the real difference between these properties?

[Skier88]

The difference is that word-wrap sets what happens when a word can't fit inside its container, and word-break sets which characters are treated as word seperators (normally that's only space characters). In the example the url can fit inside the container by jumping down below the image, and word-wrap will sooner move it than break it. What we want is for it to not every try to fit - to treat every character like a space. And that's what word-break does.

On a side note, I think a combination of Fotiman's first and last comments is a better breaking strategy than either method. That is: keep all the text to a column on the right, but use word-wrap so urls try to stay unbroken and you're cross-browser compatible. That way the URL doesn't go below the image, but you also avoid stupid breaks where you've only got a few characters on the first line.

[666admin]

I was looking at another site like mines and the excess text overflowed like this:

This word is too long for the div I've put it insi-
de of.

The word-wrap method isn't working for me at all.

[Skier88]

If you see what you're looking for then check the website and figure out how they do it. Most browsers have some sort of inspector tool built-in, so you don't even have to dig through the source. You could also just post the URL.

I suspect you'll find that the hyphens are generated by the server, javascript, or hard-coded, as the css rule "word-break:hyphenate;" doesn't work in any browser I tested.

Also, you haven't said whether "a {word-break:break-all;}" is what you're looking for.

[666admin]

@Skier88

I can't find anything in the HTML nor CSS making it do that on the site I was taking a look at.

"a {word-break:break-all;}"

Doesn't work for me :(