如何突出顯示段落的第一行

在本指南中，您將瞭解如何突出顯示段落的第一行文字，即使您不知道該行有多長。

設定文字的第一行樣式

您希望使段落的第一行更大且加粗。在第一行周圍包裹一個<span>意味著您可以根據需要對其進行樣式設定，如果由於視口尺寸較小導致第一行變短，則樣式化的文字將換行到下一行。

一個偽元素可以代替<span>；但是，它更靈活——偽元素選擇的精確內容在瀏覽器呈現內容後計算一次，因此即使視口尺寸發生變化，它也能正常工作。

在這種情況下，我們需要使用::first-line偽元素。它選擇每個段落的第一行格式化文字，這意味著您可以根據需要對其進行樣式設定。

注意：所有偽元素都以這種方式工作。它們的行為就像您已將元素插入文件中一樣，但它們是根據內容在執行時顯示的方式動態執行的。

在上面的示例中，偽元素選擇每個段落的第一行。要僅選擇第一個段落的第一行，您可以將其與另一個選擇器結合使用。在這種情況下，我們使用:first-child偽類。這允許我們選擇.wrapper的第一個子元素的第一行，如果該第一個子元素是段落。

注意：在複雜或組合選擇器中將偽元素與其他選擇器組合時，偽元素必須出現在其所在的出現的所有其他元件之後。