是否有替代不间断的空间来在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

您可以将号码放入右侧的span和float：

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

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