用 CSS 隐藏除第一个字母以外的所有文本？答案

【问题标题】：Hide all text except for the first letter with CSS?用 CSS 隐藏除第一个字母以外的所有文本？
【发布时间】：2021-10-16 23:43:29
【问题描述】：

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

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

【问题讨论】：

标签： css css-selectors

【解决方案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 的字体大小。这样，文本是如此之小以至于没有空间。当然，如果它还包含图像也无济于事。

由于它似乎不起作用，这里是使用字体大小的替代方法。不太理想，但希望它仍然可以解决您的问题。

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>

【讨论】：

似乎不适用于 Firefox。即使悬停也不会显示任何内容。
确实如此。在 FF 上，整个文本都是不可见的，即使是第一个字母。这不应该发生，因为应该允许它使元素不可见，同时使其部分内容可见。给我的感觉就像一个错误。但是，作为替代方案，您可以考虑不隐藏文本，而是使其透明或将 font-side 设置为 0。
@Paulie_D dt 应该被阻止，但即使我将display: block 添加到它，它也无济于事。
有趣，第二个 sn-p 在 Firefox 上工作（尽管在悬停时基线移动了 ~1px），直到我去修复你的 rem 错字，此时行为与第一个。
@OrangeDog rem 不是错字。这是根-em。您必须为第一个字母指定字体大小，因为它不能使用dt 的0。我使用了rem，这是文档的基本 em 大小，但您也可以使用一些 px 值。如果您使用em，它与dt 元素的字体大小相关。由于该字体大小为0，1em 也是 0，因此字母不会显示。这就是为什么这个解决方案并不理想：你必须在这里设置一些固定的字体大小。据我所知，没有办法只使用“原始”尺寸。

【解决方案2】：

我想你可以试试这个：

.twitter{
      display: block;
      color: transparent;
    }

    .twitter:first-letter{
      color: #000;
    }

 <div id="socialMedia">
    <a class="twitter">Twitter</a>
</div>
<div id="socialMedia">
    <a class="twitter">Google</a>
</div>

另见fiddle

【讨论】：

好吧，我部分收回：看起来不错并且在 JSFiddle 中工作，但在 Stack Snippet 中却没有。今天晚些时候将提交错误报告。
请检查小提琴链接

【解决方案3】：

您不能将:not 与伪元素选择器一起使用（请参阅this）。

你可以做的是以另一种方式思考：透明化整个事物，然后用::first-letter 着色。因为后者具有更高的特异性，它会覆盖透明设置，从而达到你想要的结果。

【讨论】：

【解决方案4】：

基于 Waruna 的答案的替代方案，使用 color 而不是基于布局的属性。主要优点是它适用于我测试过的所有浏览器（Firefox、Chrome 和 M$ Edge，但应该适用于所有浏览器），并且不会导致任何视觉故障（如第二个解决方案中的“基线跳跃像素”）接受的答案），因为它使用了一个完全可视的属性。

原始 CSS 的问题是您不能在 :not 中使用伪元素 (::blah)。您必须将其扩展为逆逻辑，因此您不需要 :not

dt {
  color: transparent;
}
dt::first-letter {
  color: black;
}

/* For testing */
dt:hover {
  color: black;
}

&lt;dt&gt;Hello World!&lt;/dt&gt;

【讨论】：

我们真的需要另一种方法来让文本在 css 中不可见吗？最多这应该是对已接受答案的评论。 "第三种选择是使用color: transparent 隐藏并使用color: black 显示"
啊！您会将其添加到您的答案中吗？当我读到它时，我在问自己“这有什么其他人没有的？”
@alexanderbird 当然，添加了几个短语。
再一次，这里可能的缺点是您仍然可以选择文本，尽管我承认这可能不是我回答的跳跃性问题。
@GolezTrol 有点晚了，但如果你想要这种行为，可以使用user-select: none

【解决方案5】：

聚会有点晚了，但我找到了这个可以帮助某人的解决方案

width: 1ch;
overflow: hidden;

它可能不适用于所有字体，但它应该。它非常适合等宽字体，因为ch 是字体中 O 字母的大小，所以如果你的前两个字母比 O 短，它会正常工作，否则你可能需要稍微调整一下。

更改 ch，您可以拥有前 2、3、4 个 .... 字母 :)

【讨论】：

【解决方案6】：

试试这个....

.newline1::first-letter {
    font-size: 200%;
    color: #8A2BE2;
}
.newline2::first-letter {
  /*color: transparent;*/
font-size: 0px;
}

<div class="newline1">
Test Stackoverflow.com
</div>
<div class="newline2">
Test Stackoverflow.com
</div>

.newline1::first-letter {
    font-size: 200%;
    color: #8A2BE2;
}
.newline2::first-letter {
  color: transparent;
}

<div class="newline1">
Test Stackoverflow.com
</div>
<div class="newline2">
Test Stackoverflow.com
</div>

【讨论】：

这如何回答这个问题？问题不是隐藏第一个字母，而是隐藏其余的个字母...
这是在回答与被问者完全不同的问题。我可能应该对这个答案投反对票。