Thuộc tính orphans trong CSS

Thuộc tính orphans trong CSS được sử dụng để thiết lập số dòng tối thiểu trong một phần tử phải xuất hiện tại cuối một trang.

Bạn theo dõi tình huống sau để hiểu rõ hơn về orphans:

Giả sử bạn soạn thảo một tài liệu Word đến trang thứ n nào đó. Lúc này, trang thứ n này chỉ còn 1 dòng để soạn thảo và bạn có một đoạn văn A dài 5 dòng. Vậy đoạn văn của bạn sẽ bị chia làm hai: 1 dòng trên trang n và 4 dòng còn lại trên trang (n+1). Trong ngành in, người ta gọi đó là một Orphans.

Thuộc tính orphan kiểm soát số dòng tối thiểu của một đoạn văn mà bị rời lại trên trang cũ (trang n trong ví dụ trên).

Thuộc tính orphans có thể nhận giá trị:

integer: giá trị số, là số dòng của phần tử bạn muốn xuất hiện tại bottom của trang.

Thuộc tính orphans có thể áp dụng cho:

Tất cả các phần tử Block Level trong tài liệu.

Cú pháp thuộc tính orphans trong DOM

object.style.orphans = "10"

Quảng cáo

Ví dụ thuộc tính orphans trong CSS

Bạn theo dõi ví dụ sau để thấy cách sử dụng của thuộc tính orphans trong CSS:

<html>
   <head>
      <style type="text/css">
         p {orphans: 3;}
         h1 {orphans: 5;}
      </style>
   </head>
   <body>
      <p>Tra loi bao chi hoi dau thang, Pho chu tich thuong truc VFF Tran Quoc Tuan va HLV Nguyen Huu Thang tung de cap toi 
      kha nang mo cua cho cau thu nhap tich len tuyen. Theo ong Tran Quoc Tuan, nhung cau thu nay neu dap ung duoc yeu cau 
      ve chuyen mon do HLV Nguyen Huu Thang dat rat hi deu co kha nang len tuyen.</p>
      <h1>Hoc CSS co ban tai VietJack</h1>
   </body>
</html>

Quảng cáo

Kết quả là:

Đã có app VietJack trên điện thoại, giải bài tập SGK, SBT Soạn văn, Văn mẫu, Thi online, Bài giảng....miễn phí. Tải ngay ứng dụng trên Android và iOS.

Theo dõi chúng tôi miễn phí trên mạng xã hội facebook và youtube:

Follow fanpage của team https://www.facebook.com/vietjackteam/ hoặc facebook cá nhân Nguyễn Thanh Tuyền https://www.facebook.com/tuyen.vietjack để tiếp tục theo dõi các loạt bài mới nhất về Java,C,C++,Javascript,HTML,Python,Database,Mobile.... mới nhất của chúng tôi.

Bài học CSS phổ biến khác tại vietjack.com: