传单工具提示不能有最大宽度和文本换行

Question

我做了这个codepen来演示这个问题：https://codepen.io/mbbbackus/pen/ExQbbZp

Javascript:

var map = L.map('map', {
    center: [38.89, -77.03],
    zoom: 11
});
 

var tiles = new L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
  minZoom: '15'}).addTo(map);

var marker = L.marker(
  [38.89, -77.03],
  { 
    draggable: true,
    title: "",
    opacity: 0.75
});

marker.addTo(map).bindTooltip("<p1><b>The White House</b><br>Landmark, historic home & office of the United States president, with tours for visitors.</p1>", {className: 'tooltip'})

CSS:

#map { 
  height: 100vh;
}

.leaflet-popup-content-wrapper {
  width: 100%;
}

.tooltip {
        max-width: 15rem;
        white-space: initial;
}

HTML:

<div id="map"></div>

我希望工具提示根据需要扩展宽度，直到它达到最大宽度，此时文本应该开始换行。您会在 codepen 中看到，我的工具提示没有扩展到最大宽度，而是变得非常瘦，并且每行仅在一两个单词后将文本换行。

我需要更改什么才能设置最大宽度并仍然正确地换行文本？

Answer 1

将 CSS 更改为：

.tooltip {
    max-width: 15rem;
    width: max-content;
    white-space: normal;
}

对我有用。

.leaflet-tooltip 是由传单本身定义并应用于工具提示的 CSS class。 white-space在里面定义为nowrap。这需要被覆盖。

max-content 允许 div 在应用换行之前增长到 max-width 所需的宽度。

环绕行为只是默认行为。

传单工具提示不能有最大宽度和文本换行

Leaflet tooltip can't have max width and text wrapping

css

leaflet