Veb səhifədə məzmunun çoxalmasını necə qarşısını…

CSS xüsusiyyətlərindən istifadə edin: overflow, text-overflow, word-wrap, white-space.

overflow xüsusiyyəti: blokdan kənara çıxan məzmunun göstərilməsini idarə etməyə imkan verir.

Əsas dəyərlər:

visible (standart): məzmun blokdan kənarda göstərilir.
hidden: məzmun kəsilir və blokdan kənarda gizlənir.
scroll: sürüşdürmə çubuğu əlavə edir, məzmunu sürüşdürməyə imkan verir. Hər zaman həm üfüqi, həm də şaquli çubuq əlavə edir, hətta biri lazım olmasa da.
auto: yalnız lazım olduqda sürüşdürmə çubuğu əlavə edir.

.konteyner {
  width: 200px;
  height: 100px;
  overflow: hidden; /* Çıxan məzmunu kəs */
}

text-overflow xüsusiyyəti: overflow: hidden ilə yerləşməyən mətnin necə göstəriləcəyini göstərir.

Dəyərlər:

clip (standart): mətn kəsilir.
ellipsis: mətn kəsilir və sonunda üç nöqtə (...) göstərilir.

white-space: nowrap və overflow: hidden ilə birlikdə istifadə olunur.

.konteyner {
  width: 200px;
  white-space: nowrap; /* Sətir qırılmasını qadağan et */
  overflow: hidden; /* Məzmunu kəs */
  text-overflow: ellipsis; /* Üç nöqtə əlavə et */
}

word-wrap (və ya overflow-wrap) xüsusiyyəti: brauzerin uzun sözləri yeni sətirdə ayıra bilməsini müəyyən edir.

Dəyərlər:

normal (standart): sözlər yalnız standart qırılma nöqtələrində (boşluq, tire) bölünür.
break-word: sözlər istənilən yerdə bölünə bilər, bu da daşmağı önləyir.

.konteyner {
  width: 200px;
  word-wrap: break-word; /* Uzun sözlərin bölünməsinə icazə ver */
}

white-space xüsusiyyəti: element daxilində boşluqlar və sətir qırılmalarının necə işlənəcəyini idarə edir.

Dəyər nümunələri:

normal: boşluqlar birləşdirilir, mətn avtomatik sarmalanır.
nowrap: boşluqlar birləşdirilir, lakin mətn yeni sətirə keçmir (daşıma baş verə bilər). overflow ilə birlikdə istifadə olunur.

.konteyner {
  white-space: nowrap; /* Sətir qırılmasını qadağan et */
  overflow: hidden; /* Daşmanı gizlə */
  text-overflow: ellipsis; /* Üç nöqtə əlavə et */
}

Əlavə yanaşmalar:

Fleksiyalı düzənlər (Flexbox/Grid): Flexbox və ya CSS Grid istifadə edərək, daha yaxşı ölçülən və məzmunun daşmasını qarşısını alan adaptiv düzənlər yarada bilərsiniz.
Media sorğuları: Müxtəlif ekran həllərində (məsələn, şrift ölçüsünü kiçiltmək, düzəni dəyişdirmək) stilləri dəyişə bilərsiniz.
Dinamik məzmun tənzimləməsi: JavaScript ilə məzmun və konteyner ölçülərini ölçüb, dəyişikliklər edə bilərsiniz (məsələn, mətnin qısaldılması, bəzi elementlərin gizlədilməsi) daşmağı qarşısını almaq üçün.

Hansı metodun seçilməsi, məzmun növünə və istənilən vizual nəticəyə bağlıdır. Adətən, bu yanaşmaların birləşməsi istifadə olunur.

Veb səhifədə məzmunun çoxalmasını necə qarşısını almağı tövsiyə edirsiniz?