CODEWITHSUNDEEP
htmlcsscontainersword-wrap
Amazonico
Amazonico

Reputation: 85

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.

Upvotes: 4

Views: 15686

Answers (3)

ZZ-bb
ZZ-bb

Reputation: 2167

First your css file should be .content {} (now there's a typo – content {} – so anything inside it has no effect what so ever).

Don't know about HTML5 tag <nav> so I made the <ul> tag to have a class: <ul class="nav">. Then added a new style to css file: nav {float:left} and removed the p{word-wrap: break-word;} style. This works almost perfectly. The red background ends where the content ends so it needs to be taken care of.

UPDATE: To allow the red background color to go all the way down add a css style .clearfloat{clear:both;} and put into html file <br class="clearfloat" /> after the last paragraph inside the <content>.

UPDATE2: Ditch the css file's position and left attributes of the .content and adjust the margins of <nav> and <content> so they are aligned.

Upvotes: 0

khollenbeck
khollenbeck

Reputation: 16157

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.

Upvotes: 2

developdaly
developdaly

Reputation: 1375

If you're going to position content, then you have to explicitly give it a width.

Try:

content { width: 600px; }

Upvotes: 0

Related Questions