Search code examples
htmlcsscontainersword-wrap

I need to wrap long text within a container

I'm having problems wrapping text within my container. I've already searched and all answers were to put in word-wrap: break-word; but it doesn't work for me. I'm must be doing something wrong but I'm having trouble finding what.

Here is the website so you may search through the source code: http://www.simplistico.net/

Any help is greatly appreciated.

Edit: Also, the container background is in red so you may see it clearly.

Solution

  • Why not just set a width on your p tag?

    p {
width:65%;
}

    Edit:

    Maybe I should have been more clear. If you have the p tag inside of container already, you don't necessarily need to do it as above. You could do something like.

    #container p {
width:65%;
}

    This way only the p tags inside that specified container are affected.

    By default a p tag will stretch 100% of its container.Also keep in mind that word-break and Word Wrap are CSS3 properties and only work on certain browsers by default. http://www.w3schools.com/cssref/css3_pr_word-break.asp

    Also word break will only break at the boundaries of a container. And because you have a p tag with a default width of 100% inside of another container exceeding your "red background" container. It will break at the boundaries of that container. So technically it is working.