StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POIs there an alternative to non-breaking space to put space in between text on a line in HTML/CSS?
text
Body
copied!<p>Here is a screenshot of what I'm working on - </p> <p><img src="https://i.stack.imgur.com/Wrheo.png" alt="enter image description here"></p> <p>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.</p> <p>Here is the CSS I use to create the bar graphs - </p> <pre><code> .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) ); </code></pre> <p>And the html - </p> <pre><code><div class="bar"> <div class="percentage" style="width:92%">Striking Strength: 92</div> </code></pre> <p>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.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload