CSS text-align-last ความสูงความสัมพันธ์

คำนิยามและวิธีใช้

คุณสมบัติ text-align-last กำหนดวิธีการจัดลำดับบรรทัดสุดท้ายของข้อความ

โปรดจำได้ว่า คุณสมบัติ text-align-last จะถูกกำหนดให้กับบรรทัดสุดท้ายขององค์ประกอบที่ถูกเลือกทั้งหมด ดังนั้น หากมีสามประโยคใน <div> คุณสมบัติ text-align-last จะถูกใช้กับบรรทัดสุดท้ายของแต่ละประโยค ถ้าต้องการใช้ text-align-last ในประโยคสุดท้ายของตัวแทน คุณสามารถใช้ :last child โดยดูตัวอย่างด้านล่าง

หมายเหตุ:ใน Edge/Internet Explorer คุณสมบัติ text-align-last มีผลเฉพาะข้อความที่มี text-align: justify;

ดูเพิ่มเติมที่:

ตัวอย่าง CSS:CSS ข้อความ

คู่มืออ้างอิง HTML DOM:textAlignLast คุณสมบัติ

ตัวอย่าง

จัดลำดับบรรทัดสุดท้ายของสาม <div> อย่างเหมาะสม:

div.a {
  text-align: justify;  /* สำหรับ Edge */
  text-align-last: right;
}
div.b {
  text-align: justify; /* สำหรับ Edge */ 
  text-align-last: center;
}
div.c {
  text-align: justify; /* สำหรับ Edge */ 
  text-align-last: justify;
}

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

คุณสามารถหาตัวอย่าง TIY มากกว่าที่ด้านล่างของหน้านี้

รูปแบบ CSS

text-align-last: auto|left|right|center|justify|start|end|initial|inherit;

ค่าของอาตริบุตร

ค่า คำอธิบาย
auto

ค่าเริ่มต้น

ถ้าค่า text-align คือ justify การแสดงของ text-align-last จะเหมือนกับที่เปิดเครื่องมือ start
left จัดระเบียงบรรทัดสุดท้ายที่ด้านซ้าย
right จัดระเบียงบรรทัดสุดท้ายที่ด้านขวา
center จัดระเบียงบรรทัดสุดท้ายที่กลาง
justify จัดระเบียงตัวอักษรแรกของบรรทัดที่ด้านซ้ายของตัวแทนเชิงเนื่อง และจัดระเบียงตัวอักษรสุดท้ายที่ด้านขวาของตัวแทนเชิงเนื่อง
start

จัดระเบียงบรรทัดสุดท้ายที่จุดเริ่มต้นของบรรทัด

ถ้า text-direction คือจากซ้ายไปขวา จะจัดระเบียงซ้าย ถ้า text-direction คือจากขวาไปซ้าย จะจัดระเบียงขวา。
end

จัดระเบียงบรรทัดสุดท้ายที่จุดสุดท้ายของบรรทัด

ถ้า text-direction คือจากซ้ายไปขวา จะจัดระเบียงขวา ถ้า text-direction คือจากขวาไปซ้าย จะจัดระเบียงซ้าย。
initial ตั้งค่าคุณสมบัตินี้เป็นค่าเริ่มต้นของมัน。ดู: initial。
inherit สืบทอดคุณสมบัตินี้จากตัวแทนพ่อของมัน。ดู: inherit。

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

ค่าเริ่มต้น: auto
การสืบทอด: ใช่
การสร้างอนุปราย: ไม่สนับสนุน。ดูข้อมูลเพิ่มเติม:คุณสมบัติที่เกี่ยวข้องกับอนุปราย。
เวอร์ชัน: CSS3
รูปแบบ JavaScript: object.style.textAlignLast="right"

ตัวอย่างเพิ่มเติม

ใช้ text-align-last: ที่จุดสุดท้ายของตัวแทน

div.b p:last-child {
  text-align-last: center;
}

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

การสนับสนุนของเบราวเซอร์

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

ตัวเลขที่มี -moz- แสดงว่าใช้รายละเอียดหลักในเวอร์ชันแรก。

Chrome IE / Edge Firefox Safari Opera
47.0 5.5* 49.0
12.0 -moz-		 ไม่สนับสนุน 34.0

* ใน Edge/Internet Explorer, ไม่สนับสนุน "start" และ "end" ค่า。