บางครั้งเราต้องการแสดงผลข้อความที่มีความยาวแตกต่างกันในแต่ละ card แน่นอนว่าความต่างของความยาวนี้ทำให้ส่วนแสดงผลไม่สวยงาม

จะดีกว่าไหมถ้าเราสามารถแสดงผลแต่ละ card ด้วยจำนวนบรรทัดของข้อความที่เท่ากัน ดังนี้

เราสามารถใช้ -webkit-line-clamp เพื่อกำหนดจำนวนบรรทัดได้ดังนี้

1.desc {
2  -webkit-line-clamp: 3;
3}

เนื่องจาก CSS Line Clamp นั้นเป็นส่วนหนึ่งของ CSS Overflow Module Level 3 ยังไม่พร้อมใช้งานจริงบนเว็บเบราว์เซอร์ เราจึงจำเป็นต้องระบุ -webkit เข้าไปด้านหน้าก่อนชั่วคราว

แต่ลำพังการใช้ค่านี้ไม่เพียงพอสำหรับการแสดงผลตามโจทย์ หากแต่ต้องระบุค่าต่อไปนี้ควบคู่ด้วยเสมอ

1.desc {
2  display: -webkit-box;
3  -webkit-box-orient: vertical;
4  overflow: hidden;
5}

ผลลัพธ์สุดท้ายรวมกันได้เป็น

1.desc {
2  display: -webkit-box;
3  -webkit-box-orient: vertical;
4  -webkit-line-clamp: 3;
5  overflow: hidden;
6}

แม้ว่าหลาย ๆ พร็อพเพอร์ตี้จะขึ้นต้นด้วย -webkit แต่การใช้งานนี้ก็ยังสามารถทำงานได้อย่างสมบูรณ์บนเว็บเบราว์เซอร์หลักทั่วไป