Word Wrap Text In Div.

[kvarnerexpress 0]

i use 2 div's for the page layout. One for navigation and one for the contents.

html Code:

Original - html Code:

   <div width="10%" style="position: absolute; left: 2%;"> bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb </div> <div width="86%" style="position: absolute; left: 14%;"> bbbb </div>

But now the b's wont stay within their div-element. I want lines that doesnt fit on one line within the divto wrap to the next line.

How can i do this?
Thanks,kvarnerexpress

[Saint_Michael 3]

<div style="position:absolute; top:20; left:20; width:300; height:300;></div>[/div]

you have to use the top in your div position in order to seperate it work with this set up and you will solve your issue.

Notice from dundun2007:

Edited as requested

Edited September 13, 2005 by dundun2007 (see edit history)

[Lozbo 0]

I didnt actually understand what you were asking, but i think i can see what your trouble is, as you put so many 'b's together, the div is expanding itself to fit its content, but it would be different with normal words (words with less than 10 characters or whatever). So i think that what st mike said wont do, i dont know if theres anyway to css that, like "white-space: nowrap", but upside down this property, becouse what i understood is that you want the text to actually WRAP.

[Saint_Michael 3]

no kvan is asking how to septerate the 2 tables if you notice the b's that are group together that look like doubles, thats what he is referring to.

[snlildude87 0]

No, Michael. Lozbo is right. I've had this trouble when coding templates. If you use a really long word, then I suggest just using the wordwrap function in PHP to break it down. Like Lozbo said, if you're typing normally, then your word should wrap, and you will be fine. Long words are what usually break layout anyway, and there is really no way to fix this (I may be wrong, so you CSS gurus correct me if I am).

[Saint_Michael 3]

ok then if that is the case then all you would have to do is sperate the text using a <br> or <p> tag then, cuz i just now tried different settings with width and height and i got nothing.but with css that geared more towards tables then <div> tags, but if you put the <div> tag within the table then it should word wrap with in the table its self.

[Tyssen 0]

but with css that geared more towards tables then <div> tags, but if you put the <div> tag within the table then it should word wrap with in the table its self.

CSS geared towards tables? Where'd you get that from?
And if you're using CSS, why would you enclose your div within a table?
Even if you were using tables, if a word is too long, like snlildude87 says, it's gonna stretch the width of the table cell regardless of whether you've set a width or not.

[Lozbo 0]

If you use a really long word, then I suggest just using the wordwrap function in PHP to break it down.

185780[/snapback]

How's that wordwrap function from php?

 

So i have also been trying to hack that out but didnot know how to do it.

 

Michael i think that <br /> or <p> wont do what kvar seeks, becouse that would make the layout always break, not when the browser resizes.

[littleweseth 0]

If you don't mind using a scrollbar, you can apply the following style :

#longlines {clip : auto;overflow : scroll;}

Anything that doesn't fit will automagically make it's parent box scrollable. Of course, if this is your content box, this will be a sonna sam for your users (scroll to bottom of page, move across, move back up, go back down, go across....), but if you're only enclosing small samples it should be fine.

[Lozbo 0]

hey little weseth, about this issue of making its parent box scrollable, i havent been able to make a td scrollable, i think i heard it was not possible, is it? only thing i can figure out to get pass this is by adding a div inside the cell, but i dont know if theres anyother way...

[reatum 0]

i use 2 div's for the page layout. One for navigation and one for the contents.
html Code:

Original - html Code:

  <div width="10%" style="position: absolute; left: 2%;"> bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb </div> <div width="86%" style="position: absolute; left: 14%;"> bbbb </div>

But now the b's wont stay within their div-element. I want lines that doesnt fit on one line within the divto wrap to the next line.

How can i do this?
Thanks,kvarnerexpress

all you need is:

  <div width="10%" style="position: absolute; left: 2%; word-wrap:break-word;"> bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb </div> <div width="86%" style="position: absolute; left: 14%;word-wrap:break-word;"> bbbb </div>

that will fix your problem i hope let me know

[ashiezai 0]

hi there ... thanks for the tutorial .. will tryi it out :0

[Tyssen 0]

  <div width="10%" style="position: absolute; left: 2%; word-wrap:break-word;"> bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb </div> <div width="86%" style="position: absolute; left: 14%;word-wrap:break-word;"> bbbb </div>

That only works in IE/WIN and Safari 1.3+.

[iGuest 3]

Try using <span></span> around your text-FooSoup

[iGuest 3]

Use overflow

Word Wrap Text In Div.

 

Replying to Tyssen

 

There is a style attribute 'overflow' which you can use to accomplish this. There are 3 values of this attribute viz. Auto, scroll and hidden. If you want only scroll to be present horizontally, you can use overflow-x, or overflow-y as per your case. Read this for further information (https://msdn.microsoft.com/en-us/library/ms534312(VS.85).Aspx)

 

-reply by Gaurav