CSS3 ilə birlikdə gələn və mətn daşması probleminin həlli olan text-overflow xüsusiyyəti və onun istifadəsi haqqında məlumatları ehtiva edir.
Mətnlər bəzən HTML teqinin enini keçə və elementdən kənara çıxa bilər.
Mətnin daşması probleminin qarşısını almaq və daşqın sahələrini gizlətmək üçün overflow:hidden; xüsusiyyətindən istifadə edərək gizlənə bilər.
Lakin daşan mətn istədiyimiz kimi ayrılmaya bilər və arzuolunmaz vəziyyət yarana bilər.
CSS mətn daşması problemi
Tutaq ki, aşağıdakı kimi bir quruluşumuz var.
<div>Bu qutuya sığmayan uzun mətndir.</div>
Bu quruluşa müxtəlif xassələri tətbiq edək.
div {
white-space: nowrap;
width: 200px;
border: 1px solid #000000;
overflow: hidden;
}
CSS kodlarımızda overflow: hidden; Xüsusiyyətlə divdən kənarda daşma probleminin qarşısını aldıq.
Amma yazının davam edib-etmədiyini dəqiq bilmirik.
Çünki bunun davam etdiyini göstərən heç bir açıqlama yoxdur.
Burada mətnin davam etdiyini və daşdığını ifadə etməyə imkan verən text-overflow xüsusiyyətindən istifadə edirik.
div {
white-space: nowrap;
width: 200px;
border: 1px solid #000000;
overflow: hidden;
text-overflow: ellipsis;
}
İndi mətnin daşması probleminin qarşısını aldıq və mətnin davam etdiyini bildirdik.
