html - 如何去除单词之间的空格 CSS

Question

我加了一些 字母间距 为了我强大的元素，我在每个单词的开头都有一个很大的空格: .
我尝试添加 字间距:-4px 但空间保持不变:/
我怎样才能删除这个空间(在“The”和“852”之间？)我希望每个字母的距离相同。就像单词之间没有空格一样。
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:我也尝试删除代码中的空格，但它没有任何改变。
编辑:文本的每个字符之间的空格必须相同，即使它不是同一个单词。这就是为什么我尝试在强元素上使用字母间距。

Answer 1

您的问题是因为您将多个空格加在一起，但没有  在内联文本元素中，只会渲染一个空格。这是由于 white space collapse .这导致空间在第一个 letter-spacing 处呈现，开始时大，结束时小。相应地调整您的间距，它应该可以工作，例如每个部分以空格开始，而不是在开头和结尾添加一个空格。
根据字体渲染的实际大小，您可能仍然会遇到一些子像素不规则，但除非您想删除所有间距并添加一些 margin到 <strong>标签，这可能是一个不错的起点。

.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>

您也可以使用 white-space: pre-wrap; .这是一个半可行的替代方案，但空白会在垂直和水平方向上呈现，因此如果您在任何地方有额外的空格/中断，您最终可能会得到一些时髦的结果:

.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>