Чӣ тавр тавсия медиҳед, ки бо пуршавии мундариҷа дар…

Истифодаи хосиятҳои CSS: overflow, text-overflow, word-wrap, white-space.

Хосияти overflow: имкон медиҳад, ки намоиши мундариҷаро, ки аз ҳадди блок мегузарад, идора кунад.

Арзишҳои асосӣ:

visible (тавсияшуда): мундариҷа берун аз блок намоиш дода мешавад.
hidden: мундариҷа бурида мешавад ва аз ҳадди блок пинҳон мешавад.
scroll: сатрбардорро илова мекунад, ки имкон медиҳад мундариҷаро ҳаракат додан. Ҳамеша ҳарду сатрбардор (гурезишӣ ва амудӣ) илова мекунад, ҳатто агар яке лозим набошад.
auto: танҳо дар ҳолати зарурат сатрбардор илова мекунад.

.container {
  width: 200px;
  height: 100px;
  overflow: hidden; /* Буридани мундариҷа, ки аз ҳадди блок мегузарад */
}

Хосияти text-overflow: нишон медиҳад, ки чӣ гуна бояд матн, ки дар блок бо overflow: hidden ҷой намегирад, намоиш дода шавад.

Арзишҳо:

clip (тавсияшуда): матн бурида мешавад.
ellipsis: матн бурида мешавад ва се нуқта (...) дар охир нишон дода мешавад.

Ин дар якҷоягӣ бо white-space: nowrap ва overflow: hidden истифода мешавад.

.container {
  width: 200px;
  white-space: nowrap; /* Манъ кардани гузариш ба сатрҳои нав */
  overflow: hidden; /* Буридани мундариҷа */
  text-overflow: ellipsis; /* Илова кардани се нуқта */
}

Хосияти word-wrap (ё overflow-wrap): муайян мекунад, ки оё браузер метавонад калимаҳои дарозро ба сатрҳои нав гузаронад, агар онҳо дар дохили контейнер ҷой нагиранд.

Арзишҳо:

normal (тавсияшуда): калимаҳо танҳо дар нуқтаҳои муқарраршуда (фосилаҳо, дефисҳо) гузаронида мешаванд.
break-word: калимаҳо метавонанд дар ҳар ҷо шикаста шаванд, то аз ҳад гузариш пешгирӣ шавад.

.container {
  width: 200px;
  word-wrap: break-word; /* Иҷозат додан ба шикастани калимаҳои дароз */
}

Хосияти white-space: роҳбарӣ мекунад, ки чӣ гуна дар дохили унтели мавҷудият фосилаҳо ва гузаришҳои нав коркард мешаванд.

Арзишҳои муфид барои мубориза бо аз ҳад гузариш:

normal: фосилаҳо ҷамъ мешаванд, матн автоматӣ ба сатрҳои нав мегузарад.
nowrap: фосилаҳо ҷамъ мешаванд, аммо матн ба сатрҳои нав намеравад (мумкин аст, ки аз ҳад гузарад). Барои идора кардани мундариҷаи намоишӣ overflow лозим аст.

.container {
  white-space: nowrap; /* Манъ кардани гузариш ба сатрҳои нав */
  overflow: hidden; /* Пинҳон кардани аз ҳад гузариш */
  text-overflow: ellipsis; /* Илова кардани се нуқта */
}

Дигар роҳҳо:

Flexbox/Grid: истифодаи Flexbox ё CSS Grid имкон медиҳад, ки макетҳои ҷавобгӯ сохта шаванд, ки беҳтар меомӯзанд ва аз ҳад гузаришро бо тақсимоти флексиблӣ пешгирӣ мекунанд.
Медиазапросҳо: тағйир додани услубҳо (масалан, кам кардани андозаи ҳарф, тағйир додани тартиб) дар экранҳои гуногун барои мутобиқсозии мундариҷа.
Динамикӣ танзим кардани мундариҷа: дар баъзе ҳолатҳо, бо ёрии JavaScript, метавон андозаи мундариҷаро ва контейнерро андозагирӣ кард ва тағйирот ворид кард (масалан, кӯтоҳ кардани матн, пинҳон кардани қисмҳои унтели) барои пешгирӣ аз аз ҳад гузариш.

Интихоби усули мушаххас вобаста ба навъи мундариҷа ва натиҷаи визуалӣ мебошад. Ҳамеша маҷмӯи ин усулҳо лозим аст.

Чӣ тавр тавсия медиҳед, ки бо пуршавии мундариҷа дар вебсафҳа мубориза баред?