google-maps - Google 地图 API 信息窗口中的 Firefox 溢出和侧边栏

Question

我使用 Google Maps API 做了一些小事情，我对使用它感到非常满意。但是发生了一个错误；如果我在 infoWindow 中显示更长的文本，Firefox 总是会显示一个带有溢出的侧边栏。其他浏览器都没有这样做。

这是我在 infoWindow 中的内容：

<h3>Whatever whatever</h3><span class="mark">&#9733;&#9733;&#9733;&#9733;&#9733;</span>

CSS: h3#title {

    font-family: Arial;
    font-size: 18px;
    margin: 0;
    padding: 0;    
    color: #000000;
    display: inline;
}

span.mark {
    position: relative;
    font-family: Arial;
    font-size: 18px;
    font-weight: normal;
    width: auto;
    text-align: right;
    top: 0px;
    padding: 0;    
    margin: 0 0 0 40px;
    color: #505050;
}

有人看到任何解决方案吗？谢谢你。

Answer 1

将您的内容插入到 div 中。

点击事件将是：

var myDiv = document.createElement('div'); 
myDiv.innerHTML = '<h3>Whatever whatever</h3><span class="mark">&#9733;&#9733;&#9733;&#9733;&#9733;</span>'; 
infowindow.setContent(myDiv);

如果它仍然没有帮助 - 尝试将“white-space:nowrap”添加到您的内容样式中，例如：

infowindow.setContent('<div style="white-space:nowrap">....</div>');

或者（甚至更好）在 CSS 类中。

Answer 2

基于 Micha 的回答，显式样式在 Firefox 和 Chrome 上运行良好。

infowindow.setContent('<div style="overflow:hidden">' + var + '</div>');