css - Google Maps InfoWindow 在 Firefox 中不显示完整文本

Question

我正在使用可用代码 here在我的 fiddle here .

问题是信息窗口中的文本显示如下:

它应该说:你在这里。 (单行)

使用 Firebug，我将文本的父样式更改为宽度为 75px，但随后在信息窗口中的文本上出现了一个水平滚动条。我尝试使用 Firebug 隐藏该滚动条并且它起作用了，但是当我将它放入代码中时，滚动条再次出现。

CSS:

*{
    margin: 0;
    padding: 0;
}

body{
    font-family: arial;
    font-size: 62.5%;        /* so, 10px = 1rem */
}

#button-container{
}

button{
    color: white;
    background: #4196c2;
    border: 0rem;
    border-radius: 0rem 0rem 0.5rem 0.5rem;
    padding: 0.5rem;
    outline: none;
    display: block;
    margin: 0 auto;
}

#show-hide{
    height: 1.5rem;
    line-height: 0;
}

#map-canvas{
    z-index: -1;
    position: absolute;
    top: 0;
    height: 100%;
    width: 100%;
}

.gm-style-iw div{
    /*width: 75px;
    overflow: hidden;*/
}

.gm-style-iw div div{
/*    overflow: hidden;*/
}

我该如何解决这个问题？

Answer 1

您可以通过在其内容中放置带有内联样式的 html 来控制 infoWindow 内容的宽度，如下所示:

var infowindow = new google.maps.InfoWindow({
    map: map,
    position: pos,
    content: '<div style="width: 75px">You are here.</div>'
});

这个宽度是动态改变的，并放入优先于 css 的内联样式中，这就是为什么即使你在 css 中进行更改它也​​会被覆盖