Issue
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
Solution
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>
Answered By - Paulie_D
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.