ใส่ ... เมื่อข้อความยาวด้วย CSS

wave
มานพ กองอุ่น 9 ก.ค. 2018, 20:08:51 681

ตัวอย่างนี้เป็นการกำหนดให้ข้อความตัดอัตโนมัติเมื่อยาวเกินกว่าขอบเขตการแสดงผล โดยใช้ css ในการตัดด้วยคำสั่ง overflow โดยมีการกำหนดดังนี้

<div class="post-title">
    <h2>ทดสอบข้อความหัวเรื่องยาวๆ</h2>
</div>

สำหรับ css จะเขียนดังนี้

.post-title h2 {
    white-space: nowrap;
    overflow: hidden;
    box-sizing: border-box;
    text-overflow: ellipsis;
}

การแสดงผลจะได้ลักษณะดังนี้

// ทดสอบข้อความ...


ความคิดเห็น

หากบทเรียนรู้มีความผิดพลาดประการใด หรือมีข้อเสนอแนะกรุณาแจ้ง contact@programmerthailand.com
รายละเอียด
  • ดู 681
  • รักเลย 0
  • หมวดหมู่ CSS
  • เขียนเมื่อ
  • แก้ไขเมื่อ
  • Tags css overflow ellipsis
ข้อมูลผู้เขียน
มานพ กองอุ่น

มานพ กองอุ่น

เป็นสมาชิกเมื่อ: 18 ธ.ค. 2009