CSS文本行问题答案

【问题标题】：CSS text line issueCSS文本行问题
【发布时间】：2019-12-02 23:27:28
【问题描述】：

我正在使用leaflet.js 制作我自己的地图。当我输入标记的名称时，文本行出现了一些问题。

.leaflet-tooltip-small {
font-size: 11px;
text-align: center;
text-shadow: 0px 0px 2px black, 0px 0px 2px black, 0px 0px 2px black, 0px 0px 2px black;
position: absolute;
padding: 6px;
background-color: transparent;
border: 1px solid transparent;
border-radius: 3px;
color: white; 
white-space: nowrap;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
pointer-events: none;
box-shadow: none;
}

比如我想做这样的，

[标记图标]
苹果
苹果
苹果

但文本总是覆盖标记图标。我应该怎么做才能使文本始终位于标记图标的底部？

谢谢。

【问题讨论】：

您没有显示工具提示代码 - 您是否使用 offset 和 direction 选项来控制工具提示的显示方式？
改变“偏移”对我很有帮助。谢谢你peeebeee！

标签： css text leaflet tooltip markers

【解决方案1】：

使用这个 CSS：

.leaflet-tooltip-small {
    font-size: 11px;
    text-align: center;
    text-shadow: 0px 0px 2px black, 0px 0px 2px black, 0px 0px 2px black, 0px 0px 2px black;
    background-color: transparent;
    color: white; 
    pointer-events: none;
    box-shadow: none;
    display: block;
    pointer-events: none;
    box-shadow: none;
    position: relative;
    margin-left: -50%;
    line-height: 13px;
}

还有这个 div 图标的代码：

 var icon = L.divIcon({ className: '', html: '<span class="leaflet-tooltip-small">Apple Apple Apple</span>', iconSize: [null,null] });

【讨论】：