Non-breaking space between span content and text - html

Question

Can I make a non-breaking space between span content and text? I read about it, but don't see same situation.
<span style="some_style">
<span number="1">1</span>"Some big text"
</span>
I need to add a non-breaking space between span content (number="1") and the first word after it only.
Thank you

Answer 1

On seeing your example image, I'm not sure that what you are asking for is actually what you need.
I suspect that the 'number' span should actually be outside the containing block which would usually involve absolute positioning.
Like so.
.some_style {
display: block;
width: 50%;
margin: 1em auto;
position: relative;
text-align: justify;
}
span[number] {
position: absolute;
top: 0;
left: -1em;
}
<span class="some_style">
<span number="1">1</span> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est incidunt ducimus facilis quae magnam vel sit alias consequatur voluptate modi repellat enim eaque soluta accusantium.
</span>
<span class="some_style">
<span number="2">2</span> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est incidunt ducimus facilis quae magnam vel sit alias consequatur voluptate modi repellat enim eaque soluta accusantium.
</span>
In fact, using data-attributes, you can do this without the internal span entirely.
.some_style {
display: block;
width: 50%;
margin: 1em auto;
position: relative;
text-align: justify;
}
.some_style:before {
position: absolute;
content: attr(data-number);
top: 0;
left: -1em;
}
<span class="some_style" data-number="1">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est incidunt ducimus facilis quae magnam vel sit alias consequatur voluptate modi repellat enim eaque soluta accusantium.
</span>
<span class="some_style" data-number="2">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est incidunt ducimus facilis quae magnam vel sit alias consequatur voluptate modi repellat enim eaque soluta accusantium.
</span>

Answer 2

So you want super script!
Use the <sup> tag to do this.
The sup tag makes it go up and become smaller.
Here's the fiddle: http://jsfiddle.net/yczs7qtp/4/
Hope it works!

Answer 3

I assume that what you want is that lines can't break between the numbers and the following words.
How you have it in the snippet works for me. If there is no space between the span and the next word, the line can't break between them. If you really want to have a NBSP there, you can have it with something like .number::after {content: "\A0";} in the following snippet.
.number {
vertical-align: super;
}
.number::after {
content: "\A0";
}
body {
width: 11em;
}
<span class="number">1</span>Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Phasellus nec tincidunt erat. <span class="number">2</span>Integer lectus nulla, imperdiet semper pharetra nec, hendrerit ac tortor. Sed nec gravida enim. Quisque quis condimentum odio. <span class="number">3</span>Quisque at sodales arcu. Aenean sapien nibh, faucibus in est id, tempus pellentesque purus. Nulla imperdiet, sem eu pellentesque pretium, justo quam scelerisque neque, vel accumsan dui enim non elit.
I didn't find that this behavior is guaranteed, so, to be sure, you can wrap the number with the first word together with an element with white-space: nowrap; in CSS. That works even if there is space between the number and the word, like there:
no-br {
white-space: nowrap;
}
.number {
vertical-align: super;
}
body {
width: 11em;
}
<no-br><span class="number">1</span> Orci</no-br> varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Phasellus nec tincidunt erat. <no-br><span class="number">2</span> Integer</no-br> lectus nulla, imperdiet semper pharetra nec, hendrerit ac tortor. Sed nec gravida enim. Quisque quis condimentum odio. <no-br><span class="number">3</span> Quisque</no-br> at sodales arcu. Aenean sapien nibh, faucibus in est id, tempus pellentesque purus. Nulla imperdiet, sem eu pellentesque pretium, justo quam scelerisque neque, vel accumsan dui enim non elit.
I set the width of the text in the snippets so that the changes show to me. It may render differently to you, so here is an image of how they are supposed to look: