Javascript 谷歌地图信息窗口-仅当使用<；br/>；

我使用的是谷歌地图信息窗口，其中包含来自3个输入字段的文本。第一个输入字段是标题、第二个地址（使用标准）和第三个描述。因此，所有内容看起来都是用户友好的，我在它们之间添加了

，这样每个输入都会在信息窗口中分开显示。我就是这样做的：

return (name || "") + "<br/>" +
       (addressOrCoordinates || "") + "<br/>" +
       (additionalDetails || "");

return（名称| |“”）+“
”+
（地址或坐标| |“”）+“
”+
（其他详细信息）；

但当地址稍微长一点时，会出现垂直滚动，这很奇怪，因为若你们在描述字段中写300个字符，信息窗口不会显示垂直滚动，它很好地适应了信息窗口的大小

所以我试着删除

，即使地址有几英里长，所有内容都可以在没有垂直滚动的情况下正常工作。所以我认为

会弄乱地址，所以我对litlle进行了更多的测试，似乎地址会受到

的影响，如果它位于地址的前面，而不是后面

因此，如果infowindow包含普通文本，即使有大量文本，即使文本用

分隔，它也不会显示verticall滚动，但为什么在地址前面使用

时会出现verticall滚动？有没有其他方法可以使地址输入转到infowindow中的新行，而不显示此verticall滚动

---

顺便说一句，CSS溢出不起作用，我正在使用API v3，这似乎是我很久以来看到的最疯狂的错误之一

我无法告诉您为什么会发生这种情况，但对我来说，当我删除以下CSS中的粗体标记部分（字体系列）时，它会起作用：

#mapE { text-align:center; font-family:Arial, Helvetica, sans-serif; color:#333; font-size:14px; overflow:hidden; } #mapE{文本对齐：居中；字体系列：Arial，Helvetica，无衬线；颜色：#333；字体大小：14px；溢出：隐藏；} 这不是字体宽度的问题（例如，我使用Verdana时没有问题，Verdana比

Arial

宽得多）。API必须在信息窗口打开之前计算其大小，这似乎是使用

Arial

时出错的地方

---

因此，我建议使用另一种基本的windows字体，而不是Arial（

Tahoma

应该可以，对我来说没有问题）

如果您将其添加到CSS中，这同样有效：

.gm-style-iw div {overflow:visible !important;}

---

根据信息窗口的内容，它会完全删除丑陋的垂直滚动条。它覆盖了GoogleAPI提供的计算样式

所以我的处境和你相似。我希望我的信息窗口中的内容滚动（只是Y滚动而不是X滚动），但我想禁用自动谷歌API信息窗口滚动，因为它掩盖了我的内容。像许多人一样，我将信息窗口内容包装在一个div中，并给它一个id#info#window。然后我想确保内容有一个maxheight，并且它的滚动条不会覆盖内容（我需要滚动条只垂直滚动，这是另一个考虑因素）。最后，我使用这里找到的一个答案来确保只显示我的滚动条，而不是自动显示的谷歌滚动条。所以我的CSS最终看起来像这样：

#info_window{
  width: 350px;
}

.gm-style .gm-style-iw, .gm-style .gm-style-iw a, .gm-style .gm-style-iw span, .gm-style .gm-style-iw label, .gm-style .gm-style-iw div {
  max-height: 280px;
  padding: 0px 10px 5px 5px;
  overflow-y: scroll;
  overflow-x: visible;
}

.gm-style-iw div {
  overflow:visible !important;
}

---

我发现添加

空白：nowrap似乎也解决了滚动条的问题。当然，这是否可行取决于实际内容，但也可能是一个选项。
如果文本包含浏览器可能会断行的字符（例如空格），则超过文本长度或使用

s在此处非常重要。这到目前为止还不清楚，特别是只要没有人知道
htmlEncode（）
做什么。htmlEncode（）对于这个例子并不重要。我编辑了我的问题并删除了它。你仍然没有说字符串中是否有空格（除了）。浏览器只能在特定字符处换行。是字符串包含空格（不是）此处存在相同问题吗？实际上，我很容易地解决了相同的问题，在的末尾添加了一个或多个，这样框就会足够宽，滚动条就会消失！：我不知道这个解决方案有多强！对我来说效果很好（10倍；）