Jump to content

text wrap problem


Recommended Posts

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.



Syed Shah

Link to comment
Share on other sites

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:





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






because that's where you put the soft hyphens.

Link to comment
Share on other sites

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.



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}


Link to comment
Share on other sites

This thread is more than a year old. Are you sure you have something important to add to it?

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.