FRIHOST • FORUMS • FAQ • TOS • BLOGS • DIRECTORY
You are invited to Log in or Register a Frihost Account!

Line break, word wrap, HELP!!!

   Frihost Forum Index -> Scripting -> Html, CSS and Javascript
 


kevinalle
Hi.
I need to write text into a 100px width box. (It can be a div, table, td, what you want).
if you write text like "kh lksf lsdjkfhsjdf sjdfh sdjfh" it works fine, because it wraps the lines.
Now the problem is when I insert something like "aaaaaaaaaaaaaaaaaaaaaaaaaaaa", because this doesnt wrap, and passes the 100px.
overflow:hidden is not the solution, because I want to see what is written (overflow scroll either).
Can someone please help me put text in a 100 pixel wide column without this to happen?.
dayveday
Hey, I'm sorry, but I'm not sure there's an easy way to do what you want to do. I think most browsers will not wrap unless they have a nice place they can wrap at. One way to get around it is to put zero width spacing in the text () which will allow the browser to wrap at that point. But this could backfire too, as you could find it makes the words break in weird spots Confused So, you'd have to have some 'smart' way to work out where to put them. And, not all character sets / browsers might not support them.
dayveday
Actually,
Another problem is that different browsers are probably going to react very differently to the problem. I know that IE has some problems in this regard (expanding boxes to fit the contents), but I don't know if it will apply directly to you. You could also look at maybe using min-width and max-width properties, so that the box has some room to change size?
kevinalle
thanks... I have a temporary solution:

Code:
   for(l=0;l<=text.length;l++){
      txtcnt++;
      if(text.charAt(l)==" "){txtcnt=0;} if(txtcnt>=5){text=text.substring(0,l)+"<wbr>"+text.substring(l,text.length);l+=5;txtcnt=0;}
    }


this code inserts a <wbr> every 5 whitespaceless-characters. This makes a conditional line break (only if it needs to).

I will thank any better solution, because thi one has a bit of a strange behaviour.

thanks
Fuzzy-Duck
Hi Kevin,

I think that as long as your host is using a PHP version greater than 4.0.3 you can replace:

kevinalle wrote:
thanks... I have a temporary solution:

Code:
   for(l=0;l<=text.length;l++){
      txtcnt++;
      if(text.charAt(l)==" "){txtcnt=0;} if(txtcnt>=5){text=text.substring(0,l)+"<wbr>"+text.substring(l,text.length);l+=5;txtcnt=0;}
    }


this code inserts a <wbr> every 5 whitespaceless-characters. This makes a conditional line break (only if it needs to).

I will thank any better solution, because thi one has a bit of a strange behaviour.

thanks


...with PHP's propriety wordwrap function like so:

Code:
$new_text = wordwrap($old_text, 5, '<wbr>', true);


This will insert a '<wbr>' every 5 (or 10, 15, whatever) characters and because of the 'true' flag at the end, will also break any long words. Much easier on the eye than a for loop - even though they're functionally similar! A detailed description of the function can be found on the php homesite here: http://www.php.net/wordwrap

I must admit I'm unsure as to the behaviour of the <wbr> character in different browsers though. I will research this tomorrow if I find the time and will try to offer a more reliable solution.

Maybe a zero-width breaking space character similar to the suggestion by dayveday would be a more stable solution, I don't know. As I said I'll do a bit of research and put together a few test pages and let you know.

(can you tell this is something I've been meaning to do myself for some time?! Thank you for the impetus to find out more!)

Hope this helps,
fuzzy
imagefree
use
Code:
qaaaaaaaaaaaaaaaaaaa<br />
asdssssssssss


the result will be
aaaaaaaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaa

or if you are not in html (like in word processing program) press Enter.
i think <p> will not do the work that you want.
Fuzzy-Duck
Hi Kevin,

On the face of it looks likes dayveday was onto something. Zero-width spaces seem to be the most simple & cross-browser solution as follows:

(I'm afraid I haven't tested on Safari or Opera, just IE & Firefox. If anyone would like to check out the support on other browsers then please do!)

<wbr> is not supported by later Mozilla & Firefox, so unfortunately that's out of the picture. Although Moz tends to break CSS layout less with long words, flowing out of the containing box rather than expanding it to fit the text, so I suppose it could be a quick 'n' dirty solution...

I thought I'd found a solution using soft hypens (the most semantically-correct way do do this) but strangely, these are not supported by Moz either.

So if you take dayve's original idea but code the character as unicode ​ rather than &#xfeff; then long words do word-wrap in both Firefox and Internet Explorer! And different character sets don't matter quite so much either.

Now I need to work out how to only apply the zero-width space to long words, not just randomly throughout the text. Kevin, are you using php or Javascript? I originally thought you posted your code in php (hence my earlier posted suggestion) but I'm thinking your code is actually a scrap of JS, am I right?

Cheers,
fuzzy
kevinalle
Oh, yes.
I am using JavaScript. And I need it to be JavaScript. I now PHP would be much simpler...
I just wanted to make something like a chat... And everything is fine except for... this.
I thought there was a simple, clean elegant way of solving this... but by what I read and here, its not that simple...

I guess what I did "works" and I dont really need that much more for what i am doing now.
When I finish the application I let you know. If its very successful we might have to find a nicer way to fix this.

THANKS FOR YOUR HELP!!!!!
Kevin
Reply to topic    Frihost Forum Index -> Scripting -> Html, CSS and Javascript

FRIHOST HOME | FAQ | TOS | ABOUT US | CONTACT US | SITE MAP
© 2005-2007 Frihost, forums powered by phpBB.