noUiSlider 中的画点标签在较长时会超过页面

Question

在这个例子中，第一个和最后一个点标签是不可读的，因为它们在它们的点下居中.
如何将标签移动到滑块的中心，这样它们就不会超过滑块所在的容器？
和：如何避免点标签重叠？

var slider = document.getElementById('slider');
var labels = {
1: 'A very long pip label that exceeds the page',
2: 'This one might overlap with another pip label',
3: 'The last one will also hide to the right',
};
noUiSlider.create(slider, {
start: 1,
step: 1,
range: {
'min': 1,
'max': 3
},
pips: {
mode: 'steps',
filter: function (value, type) {
return type === 0 ? -1 : 1;
},
format: {
to: function (value) {
return labels[value];
}
}
}
});

.noUi-marker-horizontal.noUi-marker-large {
height: 10px;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/14.5.0/nouislider.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/14.5.0/nouislider.min.js"></script>
<div id="slider"></div>

Answer 1

关于滑块范围内的第一个和最后一个点，您可以使用:first-child和:last-child伪选择器将它们左/右对齐，如下所示：

.noUi-marker:first-child {
text-align: left;
}
.noUi-marker:last-child {
text-align: right;
}

关于重叠点，根据您的要求，有许多方法。例如，您可以在较小的屏幕上隐藏较小的值标签：

@media (max-width: 1000px) {
.noUi-value-sub {
display: none;
}
}

Answer 2

我通过将字符串包装在不同的行中来解决同样的问题(对于具有小屏幕的设备，这是必要的(并在适当的地方使用空间。 即，"超过页面的非常长的点标签"可以写为

Array(10).fill('xa0').join('')+'A very long pip label'+'<br>'+Array(10).fill('xa0').join('')+'that exceeds the page'

这可能看起来很愚蠢，但它对我有用。