html - 是否有替代不间断空格的方法来在 HTML/CSS 中的一行文本之间放置空格？

Question

这是我正在处理的屏幕截图 -

左边是它通常的样子，右边是我添加不间断空格时的样子。我希望它看起来像右边的图像，但我必须使用荒谬的不间断空白来实现它，我想找到一个替代方案。

这是我用来创建条形图的 CSS -

     .bar { width: 300px; border: 2px solid #000;
border-radius: 14px;
  -webkit-border-radius: 14px;
  -moz-border-radius: 14px;


 }
.percentage { background: #394992; color: #fff; 

background-image: linear-gradient(left , #000000 4%, #394A92 51%);
background-image: -o-linear-gradient(left , #000000 4%, #394A92 51%);
background-image: -moz-linear-gradient(left , #000000 4%, #394A92 51%);
background-image: -webkit-linear-gradient(left , #000000 4%, #394A92 51%);
background-image: -ms-linear-gradient(left , #000000 4%, #394A92 51%);

background-image: -webkit-gradient(
    linear,
    left bottom,
    right bottom,
    color-stop(0.04, #000000),
    color-stop(0.51, #394A92)
);

和 html -

<div class="bar">
<div class="percentage" style="width:92%">Striking Strength: 92</div>

所以我想知道是否有一种方法可以将数字放置在我想要的位置，而不需要过多的不间断空间。

Answer 1

您可以将数字放入 aspan并将float其放在右侧：

<div class="percentage" style="width:92%">Striking Strength: <span>92</span></div>

.percentage span {
    float: right;
    padding-right: 0.25em; /* some spacing */
}