CSS overflow with long URL

Question

Ok, so I have google ads inside a 160x600 container. New ads are shown randomly on refresh. When an ad pops up with a long URL that doesn't contain any dashes or any characters for it to break at, it overflows out of the container div. Right now I have overflow:hidden so anything after 160 pixels in hidden. The problem is that if there's a long URL some of it gets hidden (which is fine) but the text above the ad also gets hidden instead of breaking because it flows out horizontally as far as the url goes.

How do I make the text conform and wrap at 160 pixels even though I can't make the URL below it wrap?

Thanks!

Answer 1

You could always put the URL inside a separate DIV and then set that DIV's overflow to hidden.

Answer 2

I don't think there is a clean CSS way of fixing this : http://www.w3schools.com/Css/pr_pos_overflow.asp

To fix the issue you can put the URL in its own div and set the overflow property to be hidden. This will forbid the URL to go outside the container, nut I'm not sure if that's what you're going for.

If you're using PHP I found this that can hyphenate your text:

$t = preg_replace("/>(([[:alnum:]]+:\/\/)¦www\.)([^[:space:]]".
"{30,40})([^[:space:]]*)([^[:space:]]{10,20})([[:alnum:]#?\/&=])".
"</", ">\\1\\3...\\5\\6<", $t);

(from http://www.webmasterworld.com/forum83/5762.htm)

edit: there is also the cool word-wrap css property, but it won't be handled by most of the current browsers.

Hope that helps

---

Also, this is kind of a duplicate of : http://stackoverflow.com/questions/138132/using-css-how-can-i-split-a-string-e-g-a-long-url-in-a-table-cell

Answer 3

For browsers which support it, word-wrap: break-word;.