8.1 text-overflow xüsusiyyəti
Mətnin əhatə olunması və onun görüntüsünə nəzarət etmək veb dizaynın əhəmiyyətli aspektlərindən biridir, xüsusilə uzun mətn sətirləri və ya ölçüsü məhdud olan konteynerlərlə işləyərkən. text-overflow, white-space və word-wrap (indi overflow-wrap adlanır) xüsusiyyətləri mətnin belə vəziyyətlərdə necə davranacağını idarə etməyə imkan verir.
text-overflow xüsusiyyəti mətnin konteynerin sərhədlərini aşdığı zaman necə görüntülənəcəyini idarə edir. Bu xüsusiyyət mətnin kəsilməsi effekti yaratmaq və üç nöqtə əlavə etmək üçün white-space və overflow xüsusiyyətləri ilə birlikdə istifadə olunur.
Qiymətlər:
clip: konteynerin sərhədlərini aşan mətn kəsilirellipsis: kəsilmiş mətnin sonunda üç nöqtə (...) əlavə edir
İstifadə nümunəsi:
.container {
width: 200px;
white-space: nowrap;
overflow: hidden;
border: 1px solid #000;
}
.clip {
text-overflow: clip;
}
.ellipsis {
text-overflow: ellipsis;
}
<body>
<div class="container clip">Bu mətn konteynerin sərhədi ilə kəsiləcək.</div>
<div class="container ellipsis">Bu mətn kəsiləcək və üç nöqtə ilə əvəz olunacaq.</div>
</body>
8.2 White-space xassəsi
white-space xassəsi boşluq simvollarının emalını və mətnin köçürülməsini idarə edir. Bu, boşluqların, tabulyasiyaların və yeni sətirlərin mətndə necə emal olunacağını təyin etməyə imkan verir.
Dəyərlər:
normal: boşluq və yeni sətir emalı normal şəkildə həyata keçirilir (default olaraq)nowrap: mətn bir sətrə yerləşdirilir, köçürmələr olmurpre: boşluq və yeni sətirlər saxlanılır,<pre>HTML tagında olduğu kimipre-wrap: boşluq və yeni sətirlər saxlanılır, amma lazım gəldikdə mətn yeni sətrə köçürülə bilərpre-line: yeni sətirlər saxlanılır, amma boşluqlar adi qaydada emal olunurbreak-spaces: boşluq və yeni sətirlər saxlanılır, uzun boşluqlar yeni sətrə köçürməyə səbəb ola bilər
İstifadə nümunəsi:
.normal {
white-space: normal;
}
.nowrap {
white-space: nowrap;
}
.pre {
white-space: pre;
}
.pre-wrap {
white-space: pre-wrap;
}
<body>
<div class="normal">Bu mətn növbəti sətrə köçürüləcək, əgər yer çatmazsa.</div>
<div class="nowrap">Bu mətn növbəti sətrə köçürülməyəcək və bir sətrdə göstəriləcək.</div>
<div class="pre">
Bu mətn bütün boşluqları və
yeni sətirləri saxlayacaq.
</div>
<div class="pre-wrap">
Bu mətn növbəti sətrə köçürüləcək, amma həmçinin
bütün boşluqları və yeni sətirləri saxlayacaq.
</div>
</body>
8.3 overflow-wrap xüsusiyyəti
overflow-wrap (əvvəl word-wrap kimi tanınırdı) xüsusiyyəti, konteynerin sərhədlərini aşan sözlərin necə köçürüləcəyinə nəzarət edir. Bu, konteynerin uzun sözlərlə dolub-daşmasının qarşısını almağa imkan verir, hansılar ki, bölünə bilmir.
Dəyərlər
normal: sözlərin köçürülməsi standart qaydalara uyğun olaraq həyata keçirilirbreak-word: sözlər, hətta bölünməsi tələb olunsa belə, köçürülür
İstifadə nümunəsi:
.container {
width: 200px;
border: 1px solid #000;
}
.normal {
overflow-wrap: normal;
}
.break-word {
overflow-wrap: break-word;
}
<body>
<div class="container normal">Bu mətn növbəti sətrə köçürüləcək, əgər kifayət qədər yer olmazsa.</div>
<div class="container break-word">Buuzunmüddətliifadesözüsətirəköçürülürəgəryer çatmırsa.</div>
</body>
Kodun açıqlaması:
overflow-wrap: normal;: sözlərin köçürülməsi standart qaydalara uyğun olaraq həyata keçirilir, sözlər bölünmüroverflow-wrap: break-word;: uzun sözlər ehtiyac olduqda parçalanacaq və növbəti sətrə köçürüləcək
8.4 Xüsusiyyətlərin birlikdə istifadəsi
text-overflow, white-space və word-wrap xüsusiyyətləri tez-tez birlikdə istifadə olunur kiçik ölçülü konteynerlərdə mətni göstərmək üçün istənilən effektə nail olunması məqsədilə.
İstifadə nümunəsi:
.container {
width: 200px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
overflow-wrap: break-word;
border: 1px solid #000;
}
<body>
<div class="container">Bu mətn konteynerdə yer çatışmazlığı olduqda kəsiləcək və nöqtələrlə əvəz ediləcəkdir.</div>
</body>
Kodun izahı:
white-space: nowrap;: mətn bir sətirdə göstərilir, sətir keçidi olmadanoverflow: hidden;: konteynerin sərhədlərini aşan mətni gizlədirtext-overflow: ellipsis;: kəsilmiş mətnin sonunda nöqtələr əlavə ediroverflow-wrap: break-word;: yer çatmadıqda uzun sözləri keçirir
GO TO FULL VERSION