Kaip rekomenduojate kovoti su turinio perpildymu…

Naudokite CSS savybes: overflow, text-overflow, word-wrap, white-space.

overflow savybė: leidžia valdyti turinio rodymą, kuris išlenda už bloko ribų.

Pagrindinės reikšmės:

visible (numatyta): turinys rodomas už bloko ribų.
hidden: turinys yra apkarpytas ir paslėptas už bloko ribų.
scroll: prideda slinkties juostą, leidžiančią slinkti turinį. Visada prideda abi slinkties juostas (horizontalę ir vertikalią), net jei viena nereikalinga.
auto: prideda slinkties juostą tik jei reikia.

.container {
  width: 200px;
  height: 100px;
  overflow: hidden; /* Apkarpyti turinį, kuris išlenda už ribų */
}

text-overflow savybė: nurodo, kaip rodyti tekstą, kuris netelpa į bloką su overflow: hidden.

Reikšmės:

clip (numatyta): tekstas apkarpomas.
ellipsis: apkarpo tekstą ir rodo trijų taškų (...) pabaigoje.

Naudojama kartu su white-space: nowrap ir overflow: hidden.

.container {
  width: 200px;
  white-space: nowrap; /* Draudžia pertraukti eilutes */
  overflow: hidden; /* Apkarpyti turinį */
  text-overflow: ellipsis; /* Pridėti trijų taškų */
}

word-wrap (arba overflow-wrap) savybė: nustato, ar naršyklė gali pertraukti ilgus žodžius į naują eilutę, jei jie netelpa konteineryje.

Reikšmės:

normal (numatyta): žodžiai pertraukiami tik standartinėse pertraukos vietose (tarpai, brūkšniai).
break-word: žodžiai gali būti pertraukiami bet kur, siekiant išvengti pertekėjimo.

.container {
  width: 200px;
  word-wrap: break-word; /* Leisti pertraukti ilgus žodžius */
}

white-space savybė: valdo, kaip apdorojami tarpai ir eilutės pertraukos elemento viduje.

Naudingi reikšmės kovojant su pertekėjimu:

normal: tarpai susilieja, tekstas automatiškai pertraukiamas.
nowrap: tarpai susilieja, bet tekstas nepertraukiamas į naują eilutę (gali sukelti pertekėjimą). Reikalauja overflow valdyti matomą turinį.

.container {
  white-space: nowrap; /* Draudžia pertraukti eilutes */
  overflow: hidden; /* Paslėpti pertekėjimą */
  text-overflow: ellipsis; /* Pridėti trijų taškų */
}

Papildomi būdai:

Lankstūs maketai (Flexbox/Grid): naudojant Flexbox arba CSS Grid galima kurti prisitaikančius maketus, kurie geriau mastelį ir užkerta kelią pertekėjimui dėl lankstaus erdvės paskirstymo.
Medijos užklausos: keisti stilių (pvz., sumažinti šrifto dydį, keisti išdėstymą) skirtinguose ekrano rezoliucijose, kad turinys prisitaikytų.
Dinamiškas turinio pritaikymas: JavaScript pagalba galima matuoti turinio ir konteinerio dydžius ir atlikti pakeitimus (pvz., sutrumpinti tekstą, paslėpti dalį elementų), siekiant išvengti pertekėjimo.

Konkretus metodo pasirinkimas priklauso nuo turinio tipo ir norimo vizualinio rezultato. Dažnai reikalinga šių būdų kombinacija.

Kaip rekomenduojate kovoti su turinio perpildymu tinklalapyje?