homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / HTML
Forum Library, Charter, Moderators: incrediBILL

HTML Forum

This 31 message thread spans 2 pages: 31 ( [1] 2 > >     
Breaking URLs into multiple lines
Breaking URLs into multiple lines

 4:19 pm on Oct 10, 2011 (gmt 0)

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:

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.



 5:13 pm on Oct 10, 2011 (gmt 0)

?! 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.


 5:34 pm on Oct 10, 2011 (gmt 0)


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


 6:06 pm on Oct 10, 2011 (gmt 0)

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).


 9:48 pm on Oct 10, 2011 (gmt 0)

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;


 9:52 pm on Oct 10, 2011 (gmt 0)

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:




onclick they would direct me to:

Maybe that's just a pipedream though.


 1:04 am on Oct 11, 2011 (gmt 0)

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.


 1:59 am on Oct 11, 2011 (gmt 0)

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 ;)


 4:23 am on Oct 11, 2011 (gmt 0)

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

Peace. Thanks for the help, penders.


 5:33 am on Oct 11, 2011 (gmt 0)

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.


 6:12 am on Oct 11, 2011 (gmt 0)

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?


 8:18 am on Oct 11, 2011 (gmt 0)

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?


 4:23 pm on Oct 11, 2011 (gmt 0)

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.


 4:37 pm on Oct 14, 2011 (gmt 0)


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.


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.


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


 5:40 pm on Oct 14, 2011 (gmt 0)

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


 8:10 pm on Oct 14, 2011 (gmt 0)

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


 6:14 pm on Oct 15, 2011 (gmt 0)


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.


More info, please?


 12:49 pm on Oct 18, 2011 (gmt 0)


There's also an example:


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.


 4:34 am on Oct 22, 2011 (gmt 0)

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?


 6:03 am on Oct 22, 2011 (gmt 0)

sorry and i cannot understand that


 7:46 am on Oct 22, 2011 (gmt 0)

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.


 5:47 pm on Oct 22, 2011 (gmt 0)

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.


 11:24 pm on Oct 23, 2011 (gmt 0)

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.


 11:52 pm on Oct 23, 2011 (gmt 0)

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.


 1:48 pm on Oct 24, 2011 (gmt 0)

How about this:

<!DOCTYPE html>
<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;
<div id="container">
<img src="foo.png">
<div class="imgSidebar">
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...
<a href="#">http://www.THIS_IS_NOT_BELOW_THE_IMAGE.example.com</a>

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).


 2:58 pm on Oct 25, 2011 (gmt 0)

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).


 4:06 pm on Oct 25, 2011 (gmt 0)

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?

 4:28 pm on Oct 25, 2011 (gmt 0)

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.


 5:04 am on Oct 29, 2011 (gmt 0)

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.


 8:51 pm on Oct 29, 2011 (gmt 0)

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.

This 31 message thread spans 2 pages: 31 ( [1] 2 > >
Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / HTML
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved