与Bootstrap Progress Bar重叠的文本标签
#html #css #bootstrap

使用标准引导程序进度条控制时，任何文本标签都需要以各个条形为中心。当屏幕上有多个进度控制时，这看起来可能很奇怪。

Multiple progress bars

如果我们的文本特别长，并且进度条的可见区域特别小，那么我们需要强制最小宽度并仔细考虑我们的措辞。在多语言产品中，这可能很棘手。

Progress bar with small area

最简单的处理方法是将文本居中。也许是在控件上叠加一个额外的标签。但是，这种方法取决于跨两个进度对象时的文本颜色对比。

Centred text without changing text colour

Bootstrap控件通常不需要我们在进度栏末端填充未填充的空格。但是，如果我们自己添加它并分配了一些额外的CSS，那么我们可以工作一些魔术，使其看起来像文本颜色会自动更改以防止与背景发生冲突。

Automatically changing text colour

在此示例中，我使用剪贴路径来限制我们元素的可见区域，并通过将aria-label属性移至进度容器来保留可访问性。最后，我使用了aria-hidden属性来防止屏幕读取器多次查看文本标签。

<div class="progress progress-with-labels" aria-label="50% Example" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
    <div class="progress-foreground progress-bar" style="clip-path: inset(0 50% 0 0);" aria-hidden="true">50% Example</div>
    <div class="progress-background" style="clip-path: inset(0 0 0 50%);" aria-hidden="true">50% Example</div>
</div>

.progress-with-labels {
    width: 100%;
    position: relative;

    .progress-foreground {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        color: white;
    }

    .progress-background {
        position: absolute;
        display: flex;
        justify-content: center;
        align-items: center;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        background: #e9ecef;
        color: black;
    }
}

使用这种方法，我们可以实现与下面相似的最终输出，所有文本标签都以中心为中心。

Final example