html - 为什么::first-line 不适用于预包装？

Question

HTML

  <div class="">
    Blahblah blah blah

    asndlansdlansdlajdbnalsnd        laksndlaknsdlak
    lksdnalksdnlaknsdl         akbsjdakjsbdakjsdlajsndl
     akjsbaksjdalsdn asldknalsndla asdlk nalsdnalsknd
  </div>

CSS

div::first-line {font-weight: bolder; color: blue;}
div {white-space: pre-wrap;}

它仅适用于预包装。 T_T

我的想法是突出显示每个 div 中的每一行，但我使用 pre-wrap 为 div 打字更方便。感谢帮助。 )

Answer 1

在您的 <div class=""> 之后有一个换行符开始标签。因此，您的 div 中的第一行是空的，这就是没有文本显示为蓝色的原因。

我不知道你所说的“使用 pre-wrap for div 来输入更方便”是什么意思，并且不可能从你的例子中的胡言乱语中推断出你的用例，但无论你想要完成什么，你可以看到 ::first-line即使在 white-space: pre-wrap 中也能正常工作当您删除初始换行符时:

div::first-line {font-weight: bolder; color: blue;}
div {white-space: pre-wrap;}

<div class="">Blahblah blah blah

  asndlansdlansdlajdbnalsnd        laksndlaknsdlak
  lksdnalksdnlaknsdl         akbsjdakjsbdakjsdlajsndl
   akjsbaksjdalsdn asldknalsndla asdlk nalsdnalsknd
</div>