当地图很小的时候，你如何使谷歌地图的版权文本被包裹起来?

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

当您在网页上嵌入谷歌地图时，版权文本将包含在地图上。

If you embed a map with a small width, the copyright text extends outside of the <div>, instead of wrapping onto two lines within it.

如果您嵌入了一个小宽度的地图，版权文本扩展到

之外，而不是在其中的两行进行包装。

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

这是谷歌映射为版权文本插入的HTML:

<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>

I’ve tried using jQuery to select this HTML based on its contents (using :contains()) and style it differently, but none of the styles are applied in IE 8. They’re applied fine in IE 7 and Firefox.

我尝试过使用jQuery根据它的内容(使用:contains())选择这个HTML，并对它进行不同的样式，但是在IE 8中没有应用任何样式。它们在IE 7和Firefox中应用良好。

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

Any idea what’s up with IE 8?
知道IE 8怎么了吗?
Do you know other methods to achieve the same result?
你知道其他的方法来达到同样的结果吗?

3 个解决方案

#1

div span { white-space: normal;}

#2

You should be able to set overflow:hidden on the outer div and nothing will extend outside its box.

您应该能够设置overflow:隐藏在外部div中，任何东西都不会扩展到它的框之外。

I'd be careful with removing/styling the copyright text though, since it is likely a breach of Google's TOS.

不过，我在删除/样式化版权文本时要小心，因为它可能违反了谷歌的TOS。

#3

Just tested this, and it works. Overwrite the inline css with the following:

只要测试一下，就可以了。用以下方法覆盖内联css:

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; }

#1

div span { white-space: normal;}

#2