How to remove the space between words CSS

user_13919003 0
Viewed 1350

I added some letter-spacing to my strong elements and I had a large space at the beginning of each word : enter image description here.

I tried to add word-spacing: -4px but space stays the same :/ How could I remove this space (between the "The" and the "852" ?) I would like each letter to be at the same distance. Like if there were no spaces between the words.

CSS:

.sub-lead {
    text-align: justify;
    font-family: 'Poppins', sans-serif;
    font-weight: 300;
}

strong {
    letter-spacing: 3px;
}

HTML :

<div class="sub-lead">
    <strong> THE </strong> 8 5 2 <strong> EXPERIENCE </strong> 9 0 <strong> YOU </strong> 0 8 5 <strong> ARE </strong>
</div>

PS: I also tried to remove the spaces in the code but it changes nothing.

EDIT: The space between each character of the text must be the same, even if it's not the same word. That's why I tried to use letter-spacing on strong elements.

css html
4 Answers

Your problem is because you're adding multiple spaces together, but without &nbsp; in an inline text element, only one space will render. This is due to white space collapse. This is causing the space to render at the first letter-spacing, which is big at the start, and smaller at the end. Adjust your spacing accordingly and it should work, e.g. start each section with a space, instead of adding one at the start and end.

Depending on the font rendering's actual size, you may still end up with some sub-pixel irregularity, but unless you want to remove all the spacing and add some margin to the <strong> tags, this is probably a decent starting point.

.sub-lead {
    text-align: justify;
    font-family: 'Poppins', sans-serif;
    font-weight: 300;
}

strong {
    letter-spacing: 3px;
}
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;700;800&display=swap" rel="stylesheet">
<div class="sub-lead">
    <strong>THE</strong> 8 5 2<strong> EXPERIENCE</strong> 9 0<strong> YOU</strong> 0 8 5<strong> ARE</strong>
</div>

Example rendering

You could also make use of white-space: pre-wrap;. It is a semi-viable alternative, but whitespace is rendered both vertically and horizontally, so if you have extra spaces/breaks anywhere, you may end up with some funky results:

.sub-lead {
    text-align: justify;
    font-family: 'Poppins', sans-serif;
    font-weight: 300;
    white-space: pre-wrap;
}

strong {
    letter-spacing: 3px;
}
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;700;800&display=swap" rel="stylesheet">
<div class="sub-lead">

    <strong>THE </strong> 8 5 2   <strong>   EXPERIENCE  </strong> 9 0  <strong> YOU   </strong> 0 8 5   <strong> ARE    </strong>
</div>

Funky results

user_9338100

word-spacing: 3px; I believe not letter-spacing: 3px;

Admin1

You might have some margin hiding in there. Consider using "span" instead of "strong" and make the text bold in your CSS. Span is great because it comes with 0 predefined styles, the same can't be said with almost any other html element.

user_122292310

Use a span tag instead, it allows you to select individual words(and letters if you really wanted to) without any other changes to the styles. It is a 100% customizable "container" and would definitely make this a lot easier.

user_125278610
Related