คุณสมบัติ line-clamp
คุณสมบัติ left จำกัดข้อความให้เหลือจำนวนบรรทัดที่กำหนด แทนที่บรรทัดที่เกินมาจะแสดงเป็นจุดไข่ปลา
ไวยากรณ์
selector {
line-clamp: none | จำนวนบรรทัด
}
ตัวอย่าง
มาลองจำกัดข้อความของเราให้เหลือเพียงสองบรรทัดกัน:
<p>
text text text text text text text text
text text text text text text text text
text text text text text text text text
text text text text text text text text
</p>
body {
width: 200px;
height: 100px;
}
p {
-webkit-line-clamp: 2;
line-clamp: 2;
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
}
:
