У меня есть текстовое поле, которое я хочу расширить по ширине, чтобы вместить содержимое, но только до ширины определенной ширины (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>