Treehouse: Grow your CSS skills. Land your dream job.

[Solved] Google Map Overflowing Text

  • # May 18, 2010 at 4:25 pm

    I am using a Google map on my homepage at It’s contained in a div that is 410px wide, but the Google map copyright info is displaying at a width of 636px, spilling over into another column. The styling for that text (a "span") is coming from Google and it seems "white-space:no-wrap" is the culprit, but I cannot figure out how to target it in my CSS to override Google’s. I’ve tried "overflow:hidden" on my google_map_box div but that’s not working.

    Anyone have any ideas?

    #google_map_box {
    height: 250px;
    width: 410px;
    background: black;
    border: 1px solid white;
    margin: 10px auto;


    # May 18, 2010 at 5:40 pm

    The problem is that the ‘#google_map_box div span’ has inline styling of ‘white-space:nowrap’. Targeting it with external stylesheets isn’t going to work. After the google files have loaded, you could add the following jQuery:

    # May 19, 2010 at 11:12 am

    Thanks. I am having trouble getting that to work. I don’t know my way around jquery very well. I’m not sure if I’ve put the code in the right place. It’s directly below the google map javascript right before the closing body tag. I think it should be "white-space:normal" vs. "white-space:none", so I changed that out.

    On Firefox, some inline styling seems to do the trick, but doesn’t work for Safari or Chrome.

    # May 19, 2010 at 11:57 am

    You could set the display to none :)

    # May 19, 2010 at 10:28 pm

    A clever solution; thanks! :D

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.