הגבלת מספר השורות ל N שורות ב CSS

סניפט מאד שימושי המאפשר להגביל את מספר השורות של טקסט מסויים באמצעות CSS בלבד. נעשה זאת באמצעות התכונה line-blamp ב CSS ובאופן הבא:

.text {
   overflow: hidden;
   text-overflow: ellipsis;
   display: -webkit-box;
   -webkit-line-clamp: 2; /* number of lines to show */
   -webkit-box-orient: vertical;
}

וזה ה Markup למשל:

<div class="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam consectetur venenatis blandit. Praesent vehicula, libero non pretium vulputate, lacus arcu facilisis lectus, sed feugiat tellus nulla eu dolor. Nulla porta bibendum lectus quis euismod. Aliquam volutpat ultricies porttitor. Cras risus nisi, accumsan vel cursus ut, sollicitudin vitae dolor. Fusce scelerisque eleifend lectus in bibendum. Suspendisse lacinia egestas felis a volutpat.
</div>
מצאתם טעות בקוד? הסניפט לא עובד לכם? רישמו לי בתגובות ואני מבטיח לטפל בכך במהרה ולספק סניפט תקין...
0תגובות...

השאירו תגובה

 

Up!
לבלוג