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 เวอร์ชั่นต่างๆ เข้าไว้ในซอฟท์แวร์ด้วย
