本站所有的标题词都包含在span中，并且加了一个span为space，但是为什么呢？

Question

在此网站上：https://www.arsenal.com/news/new-fa-youth-cup-kick-time

头条新青年足协杯开赛时间

如果我检查该元素，我会注意到它们包含 <span> 中的所有单词并添加了 <span class="spacer">。

<h1 class="article-card-header__title" title="New FA Youth Cup kick-off time">
  <span class="article-card-header__title-words">
    <span>New<span class="space"> </span></span>
    <span>FA<span class="space"> </span></span
    <span>Youth<span class="space"> </span></span>
    <span>Cup<span class="space"> </span></span>
    <span>kick-off<span class="space"> </span></span>
    <span>time<span class="space"> </span></span>
  </span>
</h1>

他们也没有特别 select 带有我能看到的任何 CSS 的垫片。所以我不确定为什么它需要 class。

我认为这一定与字体或间距的一致性有关。但是我真的想不出为什么。

还有谁能想出一个很好的理由来说明为什么有人会这样做吗？

Answer 1

我看不出有任何合乎逻辑的理由这样做，因为没有样式应用于 span 元素和 span.spacer。

事实上，您可以删除跨度并直接粘贴标题文本，它看起来完全一样。

Answer 2

不确定这是否是唯一目的，但我的第一个想法可能是对换行符进行更严格的控制。

您可以在页面下方的另一个标题中看到，类已更新为显示 row-1 和 row-2。这个特定示例与普通句子控制换行没有任何不同，但我可以理解您可能想要在不同单词之间强制换行（或不换行）的原因。

特别是在 content/editorial 繁重的网站中，换行符可能非常细微 and/or 有问题。

本站所有的标题词都包含在span中，并且加了一个span为space，但是为什么呢？

This website contains all heading words in spans and adds a span for a space, but why?

html

typography