handling unexpected long strings

[skaterdav85]

So I am building a site and pulling tweets from a particular user. However, one of the tweets is a link so it is really long and it just bleeds out of my div. How do developers handle unexpected long strings like this? You can see it live on my site at http://followthenookie.com/gallery. Click on the head farthest to the right.

[real_illusions]

Had a look, and the tweets display just fine, using Firefox 3.6 on Linux. Tweets have a maximum length of 144 characters or something like that.Another small tip so links dont over run the width of a container is to make sure you have white-space:normal; which is the default setting, on <a> tags. white-space:nowrap; will force all links onto one line where it goes onto 2 lines.Hope that helps

[skaterdav85]

oh wierd. The 2nd tweet (as of now) actually displays fine on Firefox on Windows. The link is broken up and continued on the next lines until it finishes and doesn't bleed out of the container. But on Chrome, it does bleed. The text in the tweet is a link but i just display it as text (otherwise i'd have to do some string parsing, which i guess i could do, but i dont want to right now). Is there a CSS property to force a single string that is too long for a container to just break up and go to the next line (so that it works the same in Chrome as does in FF)?

[Dilated]

oh wierd. The 2nd tweet (as of now) actually displays fine on Firefox on Windows. The link is broken up and continued on the next lines until it finishes and doesn't bleed out of the container. But on Chrome, it does bleed. The text in the tweet is a link but i just display it as text (otherwise i'd have to do some string parsing, which i guess i could do, but i dont want to right now). Is there a CSS property to force a single string that is too long for a container to just break up and go to the next line (so that it works the same in Chrome as does in FF)?

Works in most browsers as far as I know:

word-wrap: break-word;

[skaterdav85]

cool i just tested it on a practice document (below) and it worked so i'll implement it on my site later tonight. i never heard of that property before! neat!

<div style="width:100px;border:1px solid black;word-wrap:break-word;">this is a paragraph withacouplereallylongwords. lets see if it wraps.</div>

[ShadowMage]

Would be nice if text-overflow: ellipsis-word; was implemented... I think it looks better to have the dots than to break the link to a new line.

[thescientist]

Would be nice if text-overflow: ellipsis-word; was implemented... I think it looks better to have the dots than to break the link to a new line.

i was just looking at that for something the other day, but it is not supported

[jeffman]

You could write your own, but why bother?http://www.php.net/manual/en/function.subs...place.php#33736