CSS วิธีตัดคำ 1 บันทัด และหลายบันทัดด้วย text-overflow

CSS วิธีตัดคำ 1 บันทัด และหลายบันทัดด้วย text-overflow : ก่อนอื่นเรามารู้จักกันก่อนว่าว่า property ของ text-overflow มีอะไรบ้าง

CSS วิธีตัดคำ 1 บันทัด และหลายบันทัดด้วย text-overflow

property ของ text-overflow  ประกอบด้วย

  • visible
  • hidden
  • scroll
  • auto
  • initial
  • inherit

CSS วิธีตัด 1 บันทัดด้วย text-overflow

.cut-text{
text-decoration: none;
text-overflow: ellipsis; /* เพิ่ม ... จุดจุดจุดท้ายสุด */ 
display: block; overflow: hidden; 
white-space: nowrap; 
width: 255px; /* กำหนดความกว้าง */ 
}

ผลลัพธ์คือ :

CSS วิธีตัดคำหลายบันทัดด้วย text-overflow

.cut-text-multi{
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}

ผลลัพธ์คือ :

Lorem Ipsum คือ เนื้อหาจำลองแบบเรียบๆ ที่ใช้กันในธุรกิจงานพิมพ์หรืองานเรียงพิมพ์ มันได้กลายมาเป็นเนื้อหาจำลองมาตรฐานของธุรกิจดังกล่าวมาตั้งแต่ศตวรรษที่ 16 เมื่อเครื่องพิมพ์โนเนมเครื่องหนึ่งนำรางตัวพิมพ์มาสลับสับตำแหน่งตัวอักษรเพื่อทำหนังสือตัวอย่าง Lorem Ipsum อยู่ยงคงกระพันมาไม่ใช่แค่เพียงห้าศตวรรษ แต่อยู่มาจนถึงยุคที่พลิกโฉมเข้าสู่งานเรียงพิมพ์ด้วยวิธีทางอิเล็กทรอนิกส์ และยังคงสภาพเดิมไว้อย่างไม่มีการเปลี่ยนแปลง มันได้รับความนิยมมากขึ้นในยุค ค.ศ. 1960 เมื่อแผ่น Letraset วางจำหน่ายโดยมีข้อความบนนั้นเป็น Lorem Ipsum และล่าสุดกว่านั้น คือเมื่อซอฟท์แวร์การทำสื่อสิ่งพิมพ์ (Desktop Publishing) อย่าง Aldus PageMaker ได้รวมเอา Lorem Ipsum เวอร์ชั่นต่างๆ เข้าไว้ในซอฟท์แวร์ด้วย

CSS วิธีตัดคำ 1 บันทัด และหลายบันทัดด้วย text-overflow

*สามารถอ่านข้อมูลเพิ่มเติมได้ที่นี่

About The Author