View Full Version : link not wrapping in div

Aug 19th, 2009, 08:48 PM
Hello there

Just a small problem I was hoping someone could help out with.

If you look at the website www.distancerecordings.com

Notice the link in the twitter div on the left hand side is sticking out the edge of the div instead of wrapping.

I've tried everything I can think of to stop this happening.

Anyone got any ideas?

The div itself is using the jquery based Tweet javascript thing.

the code connected to the div is :




and here's my sites main css file - http://distancerecordings.com/main2.css


Aug 19th, 2009, 08:59 PM
could always go the easy route and add overflow:hidden; to the main div there.

Aug 19th, 2009, 09:02 PM
would that just hide the bit of the link which sticks over?

Aug 19th, 2009, 09:04 PM
yeah, or you can look into truancate

Aug 19th, 2009, 09:20 PM
hmm thanks, but that's not really solving the problem.

Aug 20th, 2009, 09:29 AM
Just add a space in the link text like

<a href="http://distrecs.muxtape.com/,">http://distrecs. muxtape.com/,</a>

Aug 20th, 2009, 09:48 AM
That's not gonna work either, as the text in that div is being pulled from twitter, so any links within the text are uneditable by me.

Aug 20th, 2009, 09:53 AM
How about adding a scroll bar by adding overflow:auto; to .tweet ?

Aug 20th, 2009, 03:27 PM
yeah that would work too, but scrollbars are ugly. I don't see why it shouldn't be able to write like the text in all th eother divs. must be something really simple i'm missing.

Aug 21st, 2009, 02:24 AM
Hm I would have thought there would be a simple solution also, but I can't think of it quite now.

The only solution I can think of is to add a small PHP or JS function in there, in which you choose to truncate or add a break when the text is a certain amount of characters. (In fact what i'd do is to check said words for amount of characters and replace with a ...)

I know there are CSS3 properties which handle this, word-wrap and text-overflow I think. but as for now and browser compatabile im stumped!

Aug 21st, 2009, 03:42 AM
That's not gonna work either, as the text in that div is being pulled from twitter, so any links within the text are uneditable by me.Is there a reason why you can't use ECMAScript to sprinkle U+200B ZERO WIDTH SPACE characters within a elements after the information is appended to the document? For example, you might use something like:

var a_elements = document.getElementsByTagName("a");
for (var i1 = 0; i1 < a_elements.length; i1++) {
var link_text = a_elements.item(i1).firstChild.data;
for (var i2 = 0; i2 < link_text.match(/(\.|\/)/).length; i2++) {
var character = link_text.match(/(\.|\/)/)[i2];
link_text.replace(link_text.match(/(\.|\/)/)[i2], character + "\u200b");