Text Going Outside of Area

Hey Guys,

Here is the page on my site…


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?



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

Yeah, something like

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

would fix it.

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+ */

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