CODEWITHSUNDEEP
htmlcss
Slateboard
Slateboard

Reputation: 1031

Is there an alternative to non-breaking space to put space in between text on a line in HTML/CSS?

Here is a screenshot of what I'm working on -

enter image description here

On the left is how it normally looks, and on the right is how it looks when I add non-breaking space. I want it to look like the image on the right, but I have to use an absurd about of non-breaking white space to achieve it and I want to find an alternative.

Here is the CSS I use to create the bar graphs - 

     .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)
);

And the html - 

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

So I want to know if there's a way to place the number where I want it to be without an excessive amount of non-breaking space.

Upvotes: 1

Views: 1399

Answers (1)

Jakub Kotrs
Jakub Kotrs

Reputation: 6229

You can place the number into a span and float it to the right:

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

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

Upvotes: 3

Related Questions