CODEWITHSUNDEEP
htmlcssword-wrap
Timm
Timm

Reputation: 12753

Only line-break/word-wrap URLs at the end of the line

I have a div which contains a URL. I want the URL to stretch to the end of the line then wrap around to the next line only at the end of the line.

For example this is what happens with 'word-wrap: break-word' in FF9:

http://www.somewebsiteaddressthathopefullydoesntexist.com
/aaaa_aaaa_aaaa_aaaa_aaaa_aaaa_aaaa_aaaa_aaaa_aaaa

But I would like it to look more like this

http://www.somewebsiteaddressthathopefullydoesntexist.com/aaaa_aaaa_aaaa_aaaa_
aaaa_aaaa_aaaa_aaaa_aaaa_aaaa

Upvotes: 2

Views: 2473

Answers (4)

Timm
Timm

Reputation: 12753

Just figured out a solution, put <wbr> between each character:

$myURL = "http://www.somewebsiteaddressthathopefullydoesntexist.com/aaaa_aaaa_aaaa_aaaa_aaaa_aaaa_aaaa_aaaa_aaaa_aaaa";

for ($i = 0; $i < strlen($myURL); $i+=6){
    $myURL = substr($myURL,0,$i)."<wbr>".substr($myURL, $i);
}

Upvotes: 1

Zeta
Zeta

Reputation: 105885

The behaviour regarding punctuations such as / (slash) differs a little bit between browser. See this JSFiddle demo. In Firefox 10.0.2 it will break before the solidus, while Opera breaks after. The rest of the line will break correctly if you use word-wrap:break-word;. Unless there's a nobreak slash entity you won't find a cross-browser solution. See also Wiki: Slash (punctuation):

The slash is also used to indicate a line break when quoting multiple lines from a poem, play, or headline.

Opera: Operascreenshot - break after / Firefox: Firefox screenshot - break before /

Upvotes: 2

11684
11684

Reputation: 7507

You could try the <wbr> (wordbreak) tag. http://www.w3schools.com/html5/tag_wbr.asp.
(It will only break there (and only there) if there is no space left, it is not the same as <br />)

Upvotes: 2

oscarmlage
oscarmlage

Reputation: 1455

Have you tested the overflow css option - link?

Upvotes: 1

Related Questions