改变行间距在传单弹出

Changing line spacing in Leaflet Popup

本文关键字：单弹出 改变      更新时间：2023-09-26

这里有一个简单的问题:我的传单地图弹出框的间距似乎被卡住了。我试着让每一个新行看起来像这样:

 Name: xxx
 Date: xxx

而不是现在的样子:

Name: xxx
Date: xxx

下面是我的脚本:

function createPopup(properties, attribute, layer, radius){
//add city to popup content string
var popupContent = '<h3>' + "Name: " + properties.info_firstName + " " + properties.info_lastName + '</h3>';
//add formatted attribute to panel content 
popupContent += "<p><b>Number of Installs:</b> " + properties.GE_Count + "</p>" + "<p><b>Number of Installs:</b> " + properties.GE_Count + "</p>";

//replace the layer popup
layer.bindPopup(popupContent, {
    offset: new L.Point(0,-radius)
});
};

我的CSS:

.leaflet-popup-content-wrapper {
    background-color: #e5e5e5;
    opacity: .8;
}
.leaflet-popup-tip {
    background-color: #e5e5e5;
    opacity: .8;
}
.leaflet-popup-content p, h3{
    color: #191900;
    text-align: left;
    font-family: 'Roboto Slab';
    font-size: 12px
}

提前感谢!

是否尝试添加

h3 {
  margin-top: 0;
  margin-bottom: 0;
}

到你的CSS?

这可能是一个简单的HTML问题。

由于您对每行使用段落(<p>标签)，您将自动获得默认的p样式，带有上下边距。

一个简单的解决方案是摆脱<p>标记，并使用换行符<br />代替。

同样的h3标题。

你也可以在你的p和h3上指定margin: 0，因为你似乎已经有了它们的CSS规则

相关文章：