คุณสมบัติ tab-size

คุณสมบัติ tab-size กำหนดขนาด การเยื้องที่สร้างโดยปุ่ม Tab

ใช้งานได้เฉพาะเมื่อตั้งค่าคุณสมบัติ white-space เป็นค่า pre หรือ pre-wrap รวมถึงสำหรับแท็ก pre ด้วย

ค่าของคุณสมบัติรับจำนวนเต็มบวก ซึ่งกำหนดจำนวนช่องว่าง ที่ตรงกับปุ่ม Tab ค่าเริ่มต้น: 8 ช่องว่าง

ไวยากรณ์

cssตัวเลือก {
  tab-size: จำนวนเต็มบวก;
}

ตัวอย่าง

มาตั้งค่าการเยื้อง Tab ให้เท่ากับ 0 ช่องว่าง:

html<div id="elem">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>

css#elem {
  tab-size: 0;
  white-space: pre;
  border: 1px solid black;
}

Результат:

ตัวอย่าง

มาตั้งค่าการเยื้อง Tab ให้เท่ากับ 1 ช่องว่าง:

html<div id="elem">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>

css#elem {
  tab-size: 1;
  white-space: pre;
  border: 1px solid black;
}

Результат:

ตัวอย่าง

มาตั้งค่าการเยื้อง Tab ให้เท่ากับ 2 ช่องว่าง:

html<div id="elem">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>

css#elem {
  tab-size: 2;
  white-space: pre;
  border: 1px solid black;
}

Результат: