Question

Consider the following Html:

<div class="one">
    <span>1. test</span>
    <span>test</span>
</div>
<div class="two">
    <span>2. test</span><span>test</span>
</div>

The result is:

1. test test
2. testtest

I need a piece of CSS that will remove the space (or enter) between the two words of the 1st line so it will look like the 2nd line. Is it possible to remove the space with CSS?

Clarification: I’m searching for a solution without having to adjust the html!

Answer 1

.one {word-spacing: -4px;}
.one span {word-spacing: normal;}

If there are only spans in the div, remove (or neutralise) the word-spacing from the div then reset it to normal for the actual spans

See working example

Update:

As rightly pointed out by @Alohci in the comments on their answer the space between words is font-size dependant so it might be better to use -0.25em instead of -4px. this is a quarter of the default (4px being a quarter of ‘default’ 16px) note this is also font-family dependant, however it should be much more robust to use the ems