隐藏除CSS的第一个字母以外的所有文本? [英] Hide all text except for the first letter with CSS?

问题描述

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

Is it possible to hide all letters after the first letter with CSS?

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

推荐答案

可以，但是CSS错误.以下版本有效(至少在Chrome中有效).它使dt不可见，并定义了第一个字母的规则以使其再次可见.

You can, but your CSS is wrong. The version below works (at least in Chrome). It makes the dt invisible, and defines an overrule for the first letter to make it visible again.

我也尝试过使用display进行相同的操作，但是按预期那样是行不通的. visibility: hidden隐藏内容，但将元素保留在适当的位置，而display: none将其从流中删除，并使子元素(在这种情况下为第一个字母)无法再次显示.

I tried the same with display too, but that doesn't work, as expected. visibility: hidden hides the content, but keeps the element in place, while display: none removes it from the flow, and makes it impossible for sub-elements (the first letter in this case) to become visible again.

我也添加了一个悬停，因此您可以将字母悬停以查看dt的其余部分.

I added a hover too, so you can hover the letter to see the rest of the 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的字体大小.这样，文本是如此之小，以至于没有空格.当然，如果它也包含图像，将无济于事.

A side effect will be that the area that is covered by the text is still claimed. Maybe that is not an issue, but if it is you will need some other solution. One possibility is to make the font-size of the dt 0 too. That way, the text is so small that is claims no space. Won't help if it also contains images, of course.

由于它似乎不起作用，因此这里是使用font-size的替代方法.不太理想，但是希望它仍然可以解决您的问题.

Since it doesn't seem to work, here is the alternative using font-size. Less than ideal, but hopefully it will still solve your problem.

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>

这篇关于隐藏除CSS的第一个字母以外的所有文本?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！