Text Going Outside of Area

HTML & CSS
1

Hey Guys,

Here is the page on my site…

http://freshtastik.ca/modo/the-fresh-feed/

and on one of the boxes in the content a green box one of the links goes over and out of the box, how can I fix this so it doesnt happen?

Thanks,

Mike

2

Know that, if you give explicit dimensions to an element and the content is bigger than the dimension you have given the content will overflow the container.

I don’t see the problem you are describing at the link you sent, but epending on the actual problem, you can use the following attributes on your CONTAINER :

word-wrap: break-word; which will force long words to break rather than overflow.
overflow-x/-y: hidden which will hide the overflowed content; Take care when using this as it may present an accessibility issue.

hope that helps

3

Yeah, something like

#item p {word-wrap: break-word;}

would fix it.

4

If you do use the word-wrap property make sure to use the cross browser equivalents since it technically is a CSS3 property even though it has been around since CSS2.

element {
    white-space: pre-wrap; /* css-3 */
    white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
    white-space: -pre-wrap; /* Opera 4-6 */
    white-space: -o-pre-wrap; /* Opera 7 */
    word-wrap: break-word; /* Internet Explorer 5.5+ */
}
5

Pretty sure all browsers do word wrap now so the following is a moot point but still fun for ***** and giggles http://www.visibilityinherit.com/code/wrap-text.php