Css noUiSlider中的Pip标签在'；很长

在本例中，第一个和最后一个pip标签不可读，因为它们位于其pip的中心。
如何将标签移动到滑块的中心，使其不超过滑块所在的容器？
和：如何避免pip标签重叠

var slider=document.getElementById（'slider'）；
变量标签={
1:'超过页面的很长pip标签'，
2:'此标签可能与另一个pip标签重叠'，
3:'最后一个也将隐藏在右侧'，
};
创建（滑块{
起点：1，
步骤：1，
范围：{
"min":1,，
“最大”：3
},
点子：{
模式：“步骤”，
过滤器：函数（值、类型）{
返回类型===0？-1:1；
},
格式：{
to：功能（值）{
返回标签[值]；
}
}
}
});
.noUi-marker-horizontal.noUi-marker-large{
高度：10px；
}
关于滑块范围上的第一个和最后一个点，可以使用和伪选择器左/右对齐，如下所示：

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

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

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

关于滑块范围上的第一个和最后一个点，可以使用和伪选择器左/右对齐，如下所示：

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

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

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

我解决了同样的问题，将字符串用不同的行包装（对于带有小屏幕的设备，这是必要的），并在适当的地方使用空间。
也就是说，“超过页面的很长pip标签”可以写成

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

Array（10）.fill（'\xa0'）.join（''）+'一个很长的pip标签'+'
'+Array（10）.fill（'\xa0'）.join（''）+'超过页面'

这可能看起来很愚蠢，但对我来说很有效。
我解决了同样的问题，将字符串包装成不同的行（对于具有小屏幕的设备，这是必要的），并在适当的地方使用空间。
也就是说，“超过页面的很长pip标签”可以写成

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

Array（10）.fill（'\xa0'）.join（''）+'一个很长的pip标签'+'
'+Array（10）.fill（'\xa0'）.join（''）+'超过页面'

这可能看起来很愚蠢，但对我来说很有用。
谢谢。不幸的是，这两个提示都不起作用。为什么将
文本对齐
添加到
.noUi标记
会更改
.noUi值
的文本对齐？而且中心值没有类
noUi value sub
。谢谢。不幸的是，这两个提示都不起作用。为什么将
文本对齐
添加到
.noUi标记
会更改
.noUi值
的文本对齐？并且中心值没有类
noUi value sub
。