Góa phụ - Thủ thuật CSS

Anonim

Theo thuật ngữ kiểu chữ, phần phụ là dòng cuối cùng của đoạn văn được để riêng trên trang mới hoặc trong một cột mới. Các widowsbất động sản trong CSS kiểm soát số lượng tối thiểu của dòng một đoạn văn có thể rơi xuống một trang mới. Thuộc tính này chỉ ảnh hưởng đến phương tiện được phân trang chẳng hạn như print.

@media print ( p ( widows: 3; ) )

Nếu một đoạn văn không thể nằm trọn vẹn trên một trang, nó sẽ được tách ra ở bất cứ đâu có thể. Bằng cách đó, các dòng đơn của đoạn văn có thể xuất hiện trên trang trước khi tiếp tục ở trang tiếp theo. Điều này thường không mong muốn vì vậy nhiều bộ xử lý văn bản yêu cầu phải để ít nhất hai dòng trên một trang cũ, thay vì một dòng. Tài orphansản hoạt động tương tự. Bạn có thể cung cấp cho nó một số dương (trong đó 2 là mặc định) hoặc inherit.

Lưu ý rằng thuộc widowstính thường không ảnh hưởng đến các phương tiện không được phân trang, chẳng hạn như screen. Tuy nhiên, các trình duyệt hỗ trợ cả hai widowscolumnscũng sẽ áp dụng chức năng dự kiến ​​cho các cột. Ngoài ra, thuộc tính chỉ ảnh hưởng đến các phần tử cấp khối.

Nói tóm lại, cụ thể trong CSS:
  • widows= số dòng tối thiểu trong một phần tách đoạn trên trang mới .
  • orphans= số dòng tối thiểu trong một đoạn được chia trên trang .
Các đường màu đỏ là góa phụ.

Có liên quan

  • trẻ mồ côi

Hỗ trợ trình duyệt

Dữ liệu hỗ trợ trình duyệt này là từ Caniuse, có nhiều chi tiết hơn. Một con số cho biết rằng trình duyệt hỗ trợ tính năng ở phiên bản đó trở lên.

Máy tính để bàn

Trình duyệt Chrome Firefox I E Cạnh Safari
25 Không số 8 12 7

Di động / Máy tính bảng

Chrome dành cho Android Android Firefox Android iOS Safari
88 Không 4.4 7,0-7,1