How can you make copyright text in the cover of Google Maps when the map is small?

Question

When you insert a Google map on a web page, copyright text is included on the map.

If you insert a card with a small width, the copyright text goes beyond the <div> instead of wrapping two lines inside it.

This is the HTML that Google Maps embeds for copyright text:

 <div style="-moz-user-select: none; z-index: 0; position: absolute; right: 3px; bottom: 2px; color: black; font-family: Arial,sans-serif; font-size: 11px; white-space: nowrap; text-align: right;" dir="ltr"> <span></span> <span>Map data &copy;2010 LeadDog Consulting, Europa Technologies - </span> <a href="http://www.google.com/intl/en_ALL/help/terms_maps.html" target="_blank" class="gmnoprint terms-of-use-link" style="color: rgb(119, 119, 204);">Terms of Use</a> <span></span> </div> 

Ive tried using jQuery to select this HTML based on its content (using :contains() ) and style it differently, but none of the styles apply in IE 8. Theyre apply perfectly in IE 7 and Firefox.

 $('.map_placeholder div:contains("Map data ")').css({'white-space': 'normal', 'margin-left': '70px', 'width': '210px', 'border-top': 'solid 10px #c00'}); 

• Any idea in IE8?
• Do you know other methods to achieve the same result?

Answer 1

 div span { white-space: normal;} 

Answer 2

You can set overflow:hidden to an external div , and nothing will go beyond its field.

I would be careful when deleting / styling copyright text, as this is most likely a violation of Google TOS.

Answer 3

Just checked it and it works. Overwrite the built-in css with the following:

 div[style]{ font-size: inherit !important; white-space: inherit !important; } span[style]{ white-space: inherit !important; } a[style]{ color: inherit !important; } span { white-space: normal; }