css - 如何为在传单地图上用作标记的 div 指定灵活宽度？

Question

我有一个文本字段，我想扩大它的宽度以适应内容，但最多只能达到一定宽度（200px）的宽度 - 任何更宽的东西都应该换行到下一行。

我目前正在使用以下 HTML 执行此操作：

<div class="wrapper">
<div class="info">Any long text can go in here to test what goes wrong with wrapping.</div>
</div>

和 CSS：

.wrapper {
   position: relative;
   display: run-in;
}
.info {
   position: absolute;
   max-width: 200px;
}

这本身就可以正常工作。但是当我将它用于 Leaflet 标记的 HTML 时，如下所示，

L.marker(
   [ myLat, myLong ],
   {icon: L.divIcon({
      className: 'my-div-icon',
      html:'<div class=wrapper><div class=label>'+innerText+'</div></div>'}) }
   ).addTo(layerGroup);

结果是错误的 - 它在每个空格之后换行。据我所知，这似乎是L.icon属性iconSize默认为 null 的结果，因此零成为<div>. 但是，如果我手动强制iconSize设置一个更大的数字（200 像素），那么即使<div>预期的内容（innerText

如何使 Leaflet 标记适合innerText<200px 的宽度，但如果宽度更宽，则以 200px 换行？

标签： cssleaflet