Style widows property

การระบุและวิธีใช้

widows รายการนี้ตั้งค่าหรือกลับรายการออกมาว่ามีบรรยายเท่านั้นที่สามารถเห็นได้ที่ด้านบนของหน้าเว็บ (ใช้สำหรับการพิมพ์หรือการแสดงแบบทดลองพิมพ์)

widows รายการนี้มีผลบนองค์ประกอบระดับบล็อคเท่านั้น。

คำแนะนำ：widows:5 แสดงว่าต่อไปด้านล่างต้องมีบรรยายที่เห็นได้เป็นอย่างน้อย 5 บรรยาย。

คำแนะนำ：โปรดดู คุณสมบัติ orphans เพื่อตั้งค่าหรือส่งกลับจำนวนบรรทัดที่ต้องการให้เห็นได้ที่ด้านล่างของหน้าเว็บ

ตัวอย่าง

เปลี่ยน widows และตรวจสอบการพิมพ์หรือตัวอย่างการพิมพ์ล่วงหน้า：

<html>
<head>
<script>
function ChangeWidows() {
  document.getElementById("p1").style.widows = document.getElementById("widows").value;
}
</script>
<style>
.othercontent {
  width: 400px;
  border-top: 19cm solid #c3c3c3;
}
@page {
/* ตั้งค่าขนาดหน้าพิมพ์ */
  size: 21cm 27cm;
  margin-top: 2cm;
}
@media print {
  .widows {
    widows:2;
  }
}
</style>
</head>
<body>
<div class="othercontent">
<input id="widows" value="2">
<button onclick="ChangeWidows();">เปลี่ยน widows</button>
<p style="font-size:120%" id="p1">
เปลี่ยน widows และดูตัวอย่างการพิมพ์ล่วงหน้า。<br>
Line 2<br>
Line 3<br>
Line 4<br>
Line 5<br>
Line 6<br>
Line 7<br>
Line 8<br>
</p>
<div class="othercontent">
</body>
</html>

ทดลองด้วยตัวเอง

รูปแบบ

ส่งกลับคุณสมบัติ widows：

object.style.widows

ตั้งค่าคุณสมบัติ widows：

object.style.widows = "number|initial|inherit"

ค่าคุณสมบัติ

ค่า คำอธิบาย
number ตัวเลข กำหนดจำนวนบรรทัดที่เห็นได้เท่านั้น ไม่อนุญาตให้ใช้ค่าลบ ค่าเริ่มต้นเป็น 2
initial ตั้งค่าคุณสมบัตินี้เป็นค่าเริ่มต้น โปรดดู initial。
inherit สืบทอดคุณสมบัตินี้จากองค์ประกอบพ่อของตน โปรดดู inherit。

รายละเอียดเทคนิค

ค่าเริ่มต้น： 2
ค่าที่ส่งกลับมา： ข้อความตัวอักษร ที่แสดงถึงจำนวนบรรทัดที่ต้องการพิมพ์ที่ด้านบนของหน้าเว็บ
CSS รุ่น： CSS2

โปรแกรมน่าติดตั้ง

ตัวเลขในตารางบ่งชี้ตัวเว็บเบราวเซอร์ฉบับแรกที่สนับสนุนคุณสมบัตินี้ทั้งหมด

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
25.0 8.0 ไม่สนับสนุน 7.0 10.0