如何删除单词CSS之间的空格答案

【问题标题】：How to remove the space between words CSS如何删除单词CSS之间的空格
【发布时间】：2021-01-08 20:43:28
【问题描述】：

我在我的强元素中添加了一些字母间距，并且每个单词的开头都有很大的空格：。

我尝试添加 word-spacing: -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：我也尝试删除代码中的空格，但没有任何改变。

编辑：文本的每个字符之间的空格必须相同，即使它不是同一个单词。这就是我尝试在强元素上使用字母间距的原因。

【问题讨论】：

标签： html css

【解决方案1】：

您的问题是因为您将多个空格一起添加，但在内联文本元素中没有&nbsp;，只会呈现一个空格。这是由于white space collapse。这导致空间在第一个 letter-spacing 处呈现，该空间在开始时很大，在结束时较小。相应地调整你的间距，它应该可以工作，例如开始每个部分都有一个空格，而不是在开头和结尾添加一个。

根据字体渲染的实际大小，您最终可能仍会出现一些亚像素不规则，但除非您想删除所有间距并在<strong> 标签中添加一些margin，否则这可能是一个不错的选择起点。

.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;。它是一个半可行的替代方案，但是空白是垂直和水平呈现的，所以如果你在任何地方有 extra 空格/中断，你最终可能会得到一些时髦的结果：

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

【讨论】：

【解决方案2】：

word-spacing: 3px;我相信不是letter-spacing: 3px;

【讨论】：

当我删除 letter-spacing 时它可以工作，但我需要我的强词中的字母更多间隔：/
是的，我试过了，但是每个字母之间的空格不一样（文本的每个字符之间，即使不是同一个单词，空格也应该是一样的）。
<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> 试试这个吧
imo 你不需要添加自定义空格，因为你按空格键的次数越多，就会出现更多的空格。您可以在较大区域之间执行 3 次，在正常间隔区域中执行 1 次
我试过你的代码，但每个字符之间的空格不一样。粗体字的字母比数字之间的间距更近。

【解决方案3】：

您可能会在其中隐藏一些边距。考虑使用“span”而不是“strong”，并使 CSS 中的文本变为粗体。 Span 很棒，因为它带有 0 种预定义样式，几乎任何其他 html 元素都不能这样说。

【讨论】：

我试过了，但没有任何改变。问题是，当我不使用 letter-spacing 时，它可以工作，但我确实需要文本的每个字母之间的空格相同（即使它不是同一个单词）。这是没有 letter-spacing 的结果：imgur.com/a/zixwBKR

【解决方案4】：

改为使用 span 标签，它允许您选择单个单词（如果您真的想要的话，还可以选择字母）而不需要对样式进行任何其他更改。它是一个 100% 可定制的“容器”，肯定会让这变得容易得多。

【讨论】：

这就是我目前正在做的事情，正如@chris-neisen 告诉我的那样，但这并没有改变任何事情。
@Bonsaï 我建议在开始时使用 *{ } 清除整个页面的样式，以确保您没有挥之不去的样式。