Limit Length Text CSS HTML

การเขียนโค้ด Html กําหนดจํานวนตัวอักษร ค่อนข้างใช้บ่อยและพบเห็นได้ในหน้าแรกหรือหน้าแสดงสินค้า ซึ่งเราสามารถเขียน Cascading Style Sheets (CSS) ให้จํากัดตัวอักษร Html แสดงแบบ 1 บรรทัด 2 บรรทัด 3 บรรทัด หรือที่ตามต้องการได้ โดยการเขียน CSS ประกาศไว้ แล้วเรียกใช้งานผ่าน Class เช่น Class="textLimit" (ตามตัวอย่างด้านล่าง) เป็นต้น เท่านี้ก็สามารถจำกัดตัวอักษรให้แสดงบนหน้าเว็บได้แล้วครับ

➤  CSS (Cascading Style Sheets) 

<style>

 .textLimit

 {

   overflow: hidden;
   text-oveflow: ellipsis;
   display: -webkit-box;
   line-height: 16px;     /* ขนาดความสูงตัวอักษร 1 บรรทัด */
   max-height: 32px;      /* ขนาดความสูงตัวอักษร 2 บรรทัด*/
   -webkit-line-clamp: 2; /* จำนวนบรรทัดที่แสดง 2 บรรทัด */
   -webkit-box-orient: vertical;
}

</style>

➤  HTML Code

<div  class="textLimit" >

Upin Sale Online Shopping อูพิน เซลล์ ออนไลน์ ช้อปปิ้ง ส่งฟรี ทั่วไทย /* ให้ตัดตัวอักษรและแสดงเพียง 2 บรรทัด*/

</div>