Как указать гибкую ширину для div, используемого в качестве маркера на карте Leaflet? - PullRequest
0 голосов
/ 09 ноября 2019

У меня есть текстовое поле, которое я хочу расширить по ширине, чтобы вместить содержимое, но только до ширины определенной ширины (200 пикселей) - все, что шире, должно переноситься на следующую строку.

IВ настоящее время я делаю это со следующим 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;
}

Это прекрасно работает само по себе. Но когда я использую его для HTML маркера Leaflet следующим образом,

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> ВСЕГДА имеет ширину 200 пикселей, даже если предполагаемое содержимое (innerText) меньше 200 пикселей, оставляя пробел наside.

Как мне сделать так, чтобы маркер Leaflet соответствовал ширине innerText, если это <200px, но обернуть в 200px, если его ширина шире? </p>

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...