SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Guru
    Join Date
    Aug 2009
    Posts
    675
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Text Going Outside of Area

    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. #2
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,821
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    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. #3
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,319
    Mentioned
    462 Post(s)
    Tagged
    8 Thread(s)
    Yeah, something like

    Code:
    #item p {word-wrap: break-word;}
    would fix it.

  4. #4
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,198
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    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.

    Code CSS:
    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. #5
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,658
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    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


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •