CSS matn effektlari

CSS’da matn toshib ketishi, so‘zlarning o‘ralishi, qator uzish qoidalari va yozish rejimlarini boshqarish uchun bir nechta xossa mavjud.

Bu bobda quyidagi xossalar haqida bilib olasiz:

text-overflow — toshib ketgan kontentni qanday boshqarishni belgilaydi
word-wrap — uzun so‘zlarning uzilib keyingi qatorga o‘tish imkonini beradi
word-break — qator uzish qoidalarini belgilaydi
writing-mode — matn qatorlari gorizontal yoki vertikal joylashishini belgilaydi

CSS text-overflow xossasi

CSS text-overflow xossasi ko‘rsatilmaydigan toshib ketgan kontent foydalanuvchiga qanday bildirilishini belgilaydi. U kesilishi yoki ellipsis (...) bilan ko‘rsatilishi mumkin.

text-overflow kuchga kirishi uchun quyidagi ikkala xossa kerak:

Bu yerda toshib ketgan kontent kesiladi:

Bu qutiga sig‘maydigan uzun matn

Bu yerda toshib ketgan kontent ellipsis (...) bilan ko‘rsatiladi:

Bu qutiga sig‘maydigan uzun matn

CSS kodi quyidagicha:

Misol

p.test1 {
  width: 200px;
  border: 1px solid #000000;
white-space: nowrap;
overflow: hidden;
text-overflow: clip;
}

p.test2 {
  width: 200px;
  border: 1px solid #000000;
  white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

O‘zingiz sinab ko‘ring »

Quyidagi misol element ustiga sichqoncha olib borilganda toshib ketgan kontentni qanday ko‘rsatishni ko‘rsatadi:

Misol

p:hover {
overflow: visible;
}

O‘zingiz sinab ko‘ring »

CSS word-wrap xossasi

CSS word-wrap xossasi uzun so‘zlarning uzilib keyingi qatorga o‘tish imkonini beradi.

Agar so‘z juda uzun bo‘lsa, u hududga sig‘masa, u tashqarida kengayadi:

Bu paragraf juda uzun so‘zni o‘z ichiga oladi: thisisaveryveryveryveryveryverylongword. Uzun so‘z uzilib keyingi qatorga o‘tadi.

word-wrap xossasi matnni o‘ralishga majburlash imkonini beradi — hatto so‘z o‘rtasidan ajratish kerak bo‘lsa ham:

Bu paragraf juda uzun so‘zni o‘z ichiga oladi: thisisaveryveryveryveryveryverylongword. Uzun so‘z uzilib keyingi qatorga o‘tadi.

CSS kodi quyidagicha:

Misol

Uzun so‘zlarning uzilib keyingi qatorga o‘tishiga ruxsat berish:

p {
word-wrap: break-word;
}

O‘zingiz sinab ko‘ring »

CSS word-break xossasi

CSS word-break xossasi qator oxiriga yetganda so‘zlarning qanday uzilishini belgilaydi.

Bu xossa quyidagi qiymatlardan birini qabul qilishi mumkin:

normal — bu standart. Tilning standart qator uzish qoidalaridan foydalanadi
break-all - toshib ketishining oldini olish uchun so‘zlarni istalgan belgi bo‘yicha sindirishga imkon beradi
keep-all - So‘zlar uzilishining oldini oladi

Bu yerda normal’dan foydalanamiz:

Bu paragraf ba’zi matnlarni o‘z ichiga oladi. Bu qator tire bilan ajratilgan joyda uziladi.

Bu yerda break-all’dan foydalanamiz:

Bu paragraf ba’zi matnlarni o‘z ichiga oladi. Qatorlar har qanday belgida uziladi.

CSS kodi quyidagicha:

Misol

p.test1 {
word-break: normal;
}

p.test2 {
word-break: break-all;
}

O‘zingiz sinab ko‘ring »

CSS writing-mode xossasi

CSS writing-mode xossasi matn qatorlarining gorizontal yoki vertikal joylashishini belgilaydi.

Bu xossa quyidagi qiymatlardan birini qabul qilishi mumkin:

horizontal-tb — standart. Matn gorizontal chapdan o‘ngga, vertikal yuqoridan pastga oqadi
vertical-rl — matn vertikal yuqoridan pastga, gorizontal o‘ngdan chapga oqadi
vertical-lr — matn vertikal yuqoridan pastga, gorizontal chapdan o‘ngga oqadi

Mana vertical-rl yozish rejimiga ega span elementli matn.

Quyidagi misol ba’zi turli yozish rejimlarini ko‘rsatadi:

Misol

p.test1 {
writing-mode: horizontal-tb;
}

span {
writing-mode: vertical-rl;
}

p.test2 {
writing-mode: vertical-rl;
}

O‘zingiz sinab ko‘ring »

CSS matn effekti xossalari

Quyidagi jadval CSS matn effekti xossalarini sanab o‘tadi:

Xususiyat	Tavsif
text-justify	Tegishli matn qanday tekislanishi va oraliq joylashtirilishi kerakligini belgilaydi
text-overflow	Ko‘rsatilmagan to‘lib-toshgan kontent foydalanuvchiga qanday signal berilishi kerakligini belgilaydi
word-break	CJK bo‘lmagan yozuvlar uchun qatorni uzish qoidalarini belgilaydi
word-wrap	Uzoq so‘zlarni sindirish va keyingi qatorga o‘tkazish imkonini beradi
writing-mode	Matn satrlari gorizontal yoki vertikal ravishda joylashtirilishini belgilaydi

W3Schools Pathfinder

Yutuqlaringizni kuzating – bu bepul!

Ro'yxatdan o'tish Kirish