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

การตัดคำเป็นสิ่งที่สำคัญต่อการออกแบบอย่างนึง ทำให้ข้อความใน div ที่ต่อกันมีขนาดเท่ากัน หรือนำไปประยุกต์ใช้ได้อีก

อย่างในโค้ดตัวอย่างนี้ จะถูกลิมิตข้อความไว้ไม่ให้เกิน 2 บรรทัด

ใน Css

overflow: hidden;
text-overflow: ellipsis;
-webkit-box-orient: vertical;
display: -webkit-box;
-webkit-line-clamp: 2;  /*แสดงข้อความไม่เกิน 2 บรรทัด หลังจากนั้นจะขึ้นเป็น ... */

ใน Laravel

{!!Str::limit($text,10,'อ่านเพิ่มเติม')!!} // แสดงความความไม่เกิน 10 ตัวอักษร หลังจากนั้นจะขึ้นเป็น อ่านเพิ่มเติม