css - 使用 CSS 隐藏除第一个字母以外的所有文本？

Question

是否可以使用 CSS 隐藏第一个字母之后的所有字母？

dt:not(::first-letter) {
  display: none;
}

Answer 1

可以，但是您的 CSS 有误。下面的版本有效(至少在 Chrome 中)。它使 dt 不可见，并为第一个字母定义一个否决以使其再次可见。

我也对 display 进行了同样的尝试，但正如预期的那样不起作用。 visibility: hidden 隐藏内容，但将元素保留在原位，而 display: none 将其从流中移除，并使子元素(第一个字母)无法显示在这种情况下)再次变得可见。

我也添加了悬停，所以你可以悬停字母来查看 dt 的其余部分。

dt {
  visibility: hidden;
}
dt::first-letter {
  visibility: visible;
}

/* Hover the first letter to see the rest */
dt:hover {
  visibility: visible;
}

Hover to see the rest:
<dt>Lorum ipsum is a weird text</dt>
<dt>Foo bar</dt>

一个副作用是文本覆盖的区域仍然被声明。也许这不是问题，但如果是，您将需要一些其他解决方案。一种可能性是使 dt 的字体大小也为 0。这样一来，文本就非常小，不占空间。当然，如果它还包含图像，那将无济于事。

因为它似乎不起作用，这里是使用 font-size 的替代方法。不太理想，但希望它仍能解决您的问题。

dt {
  font-size: 0;
}
dt::first-letter {
  font-size: 1rem;
}

/* Hover the first letter to see the rest */
dt:hover {
  font-size: 1em;
}

Hover to see the rest:
<dt>Lorum ipsum is a weird text</dt>
<dt>Foo bar</dt>