คุณสมบัติ text-align-last

คุณสมบัติ text-align-last กำหนด การจัดแนวบรรทัดสุดท้ายของข้อความ: ไปทาง ขอบซ้าย ไปทางขอบขวา ไปตรงกลาง หรือไปทั้งขอบซ้าย และขวาพร้อมกัน

โปรดทราบว่าหากภายในองค์ประกอบ (เช่น ในย่อหน้า) มีข้อความเพียงบรรทัดเดียว - บรรทัดนั้นจะถือว่าเป็นทั้งบรรทัดแรกและ บรรทัดสุดท้ายพร้อมกัน และการจัดแนวของมันจะเป็น ตามที่กำหนดใน text-align-last ไม่ใช่ ตามที่กำหนดใน text-align

ไวยากรณ์

cssตัวเลือก {
  text-align-last: center | left | right | justify | auto | start | end;
}

ค่า

ค่า	คำอธิบาย
`center`	จัดกึ่งกลาง
`left`	จัดชิดซ้าย
`right`	จัดชิดขวา
`justify`	จัดเต็มทั้งขอบซ้ายและขอบขวาพร้อมกัน
`auto`	ไม่เปลี่ยนแปลงการจัดแนวขององค์ประกอบ
`start`	เท่ากับ `left` หากข้อความไหลจากซ้ายไปขวา และเท่ากับ `right` เมื่อข้อความไหลจากขวาไปซ้าย (เช่น ภาษาอาหรับ เป็นต้น)
`end`	เท่ากับ `right` หากข้อความไหลจากซ้ายไปขวา และเท่ากับ `left` เมื่อข้อความไหลจากขวาไปซ้าย
`inherit`	รับค่ามาจากองค์ประกอบแม่

ค่าเริ่มต้น: auto

ตัวอย่าง . ค่า left

html<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elitorire
  aenean a dapibus magna, ac interdum nisl. Suspendisse egetil
  fringilla nibh, eu commodo arcu. Donec lacinia tempor velite
  sed tincidunt. Aliquam porttitor nulla purus, vel vulputater
  ipsum faucibus sed. Phasellus sodales, lorem vel cursus vehi
  ante purus lacini dui, interdum fringilla massa eros ut duir.
</p>
<p>
  Lorem ipsum dolor sit amet.
</p>

cssp {
  text-align: justify;
  text-align-last: left;
}

Результат:

ตัวอย่าง . ค่า right

html<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elitorire
  aenean a dapibus magna, ac interdum nisl. Suspendisse egetil
  fringilla nibh, eu commodo arcu. Donec lacinia tempor velite
  sed tincidunt. Aliquam porttitor nulla purus, vel vulputater
  ipsum faucibus sed. Phasellus sodales, lorem vel cursus vehi
  ante purus lacini dui, interdum fringilla massa eros ut duir.
</p>
<p>
  Lorem ipsum dolor sit amet.
</p>

cssp {
  text-align: justify;
  text-align-last: right;
}

Результат:

ตัวอย่าง . ค่า center

html<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elitorire
  aenean a dapibus magna, ac interdum nisl. Suspendisse egetil
  fringilla nibh, eu commodo arcu. Donec lacinia tempor velite
  sed tincidunt. Aliquam porttitor nulla purus, vel vulputater
  ipsum faucibus sed. Phasellus sodales, lorem vel cursus vehi
  ante purus lacini dui, interdum fringilla massa eros ut duir.
</p>
<p>
  Lorem ipsum dolor sit amet.
</p>

cssp {
  text-align: justify;
  text-align-last: center;
}

Результат:

ตัวอย่าง . ค่า justify

html<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elitorire
  aenean a dapibus magna, ac interdum nisl. Suspendisse egetil
  fringilla nibh, eu commodo arcu. Donec lacinia tempor velite
  sed tincidunt. Aliquam porttitor nulla purus, vel vulputater
  ipsum faucibus sed. Phasellus sodales, lorem vel cursus vehi
  ante purus lacini dui, interdum fringilla massa eros ut duir.
</p>
<p>
  Lorem ipsum dolor sit amet.
</p>

cssp {
  text-align: justify;
  text-align-last: justify;
}

Результат: