text wrap problem

[shah]

hello every one,

i have a problem in CSS. when i put an extra large text without a space, it goes out of the boundry of div tag. i want to wrap it to the next line no matter how long the text is or regardless of whether a space is there or not. i do not want a scroll. i want to wrap the word. any help/solution would be appreciated.

 

Thanks

Syed Shah

[AmandaF]

It won't wrap because it's not supposed to wrap mid-word.  You can insert soft hyphens into the text to make it wrap mid-word.  The soft hyphens will only appear if they're necessary for wrapping the text.  For example, if you write really­long­word instead of reallylongword, and reallylongword is 4 characters or fewer too long for the div, it will become:

 

reallylong-

word

 

If it's more than 4 characters too long, it will become

 

really-

long-

word

 

because that's where you put the soft hyphens.

[Ken2k7]

Give the DIV a set width, but like AmandaF said, if your line is really, really long, then it won't wrap. You can try overflow.

[dbrimlow]

Do not use position:absolute for your containers, do NOT designate height on the container, use "relative" dimensions (percentages, ems) for text and containers so the resize and scale properly, use proper semantic markup - paragraphs, headings, lists, etc. - then style for THEM in the css not the div that contains them.

 

Dont just toss text into divs and style the div for text - that's "bad".

 

A div is an html placeholder - style it for its own features, dimensions, colors, etc and not the text within it.

 

Then use specificity to style proper text level tags within that div that you want different from your default, like so.

 

ex.

p {color:#555; margin:.4em 0; font-size:1em}

 

#leftNav {float:left; margin: 0; width:25%}

 

#leftNav p {color:#000; margin:.6em .25em; font-size:.9em}