How to highlight the first line of a paragraph

Định kiểu dòng văn bản đầu tiên

Bạn muốn làm cho dòng đầu tiên của đoạn văn trở nên lớn hơn và in đậm. Việc bọc một thẻ <span> xung quanh dòng đầu tiên có nghĩa là bạn có thể định kiểu nó theo bất kỳ cách nào, tuy nhiên nếu dòng đầu tiên trở nên ngắn hơn do kích thước viewport nhỏ hơn, văn bản đã được định kiểu sẽ bọc xuống dòng tiếp theo.

Sử dụng pseudo-element

Một pseudo-element có thể thay thế <span>; tuy nhiên, nó linh hoạt hơn — nội dung chính xác được chọn bởi pseudo-element được tính toán khi trình duyệt đã hiển thị nội dung, vì vậy nó sẽ hoạt động ngay cả khi kích thước viewport thay đổi.

Trong trường hợp này, chúng ta cần sử dụng pseudo-element ::first-line. Nó chọn dòng định dạng đầu tiên của mỗi đoạn văn, nghĩa là bạn có thể định kiểu nó theo yêu cầu của mình.

<div class="wrapper">
  <p>
    Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion
    daikon amaranth tatsoi tomatillo melon azuki bean garlic.
  </p>

  <p>
    Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette
    tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato.
    Dandelion cucumber earthnut pea peanut soko zucchini.
  </p>
</div>

.wrapper p::first-line {
  font-weight: bold;
  font-size: 130%;
}

Kết hợp pseudo-elements với các selector khác

Trong ví dụ trên, pseudo-element chọn dòng đầu tiên của mỗi đoạn văn. Để chỉ chọn dòng đầu tiên của đoạn văn đầu tiên, bạn có thể kết hợp nó với một selector khác. Trong trường hợp này, chúng ta sử dụng :first-child pseudo-class. Điều này cho phép chúng ta chọn dòng đầu tiên của phần tử con đầu tiên của .wrapper nếu phần tử con đầu tiên đó là một đoạn văn.

<div class="wrapper">
  <p>
    Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion
    daikon amaranth tatsoi tomatillo melon azuki bean garlic.
  </p>

  <p>
    Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette
    tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato.
    Dandelion cucumber earthnut pea peanut soko zucchini.
  </p>
</div>

.wrapper p:first-child::first-line {
  font-weight: bold;
  font-size: 130%;
}

Xem thêm

• Trang tham khảo pseudo-elements.
• Learn CSS: Pseudo-classes and pseudo-elements.