Registrer deg
Script • CSS3 layout og frontend

CSS3 overflytvern for lange ord

Hindrer lange lenker, filnavn og kodeord fra å sprenge kortlayout.

Les gjennomFlere scripts
.content-panel,
.content-panel * {
  min-width: 0;
}

.content-panel h1,
.content-panel h2,
.content-panel h3,
.content-panel p,
.content-panel a,
.content-panel code {
  overflow-wrap: anywhere;
  word-break: normal;
}
Weboracle
18.07.20260 visningerCSS3

Hindrer lange lenker, filnavn og kodeord fra å sprenge kortlayout.

CSS3 overflytvern for lange ord er et praktisk script/eksempel for CSS3. Det er skrevet for å være kopierbart, men også forklart slik at leseren forstår bruksområde, krav og begrensninger.

Illustrasjon: CSS3 overflytvern for lange ord
Bildet viser ressursens plass i arbeidsflyten: input, kontroll, resultat og publisering.

Når bør du bruke dette?

Bruk eksempelet når du trenger en liten, tydelig byggekloss som kan testes isolert før den kobles til et større nettsted. Det er særlig nyttig når samme oppgave gjentas, når innhold må kontrolleres før publisering, eller når layout og markup må tåle ukjent redaksjonelt innhold.

Krav og forutsetninger

Moderne nettleser. Test med lange URL-er og smale skjermer. Test alltid i en kopi før du legger løsningen inn i produksjon. Tilpass filstier, klassenavn, meldinger og sikkerhetsnivå til ditt eget miljø.

Slik tilpasser du scriptet

  1. Les gjennom beskrivelse og krav før du kopierer kode.
  2. Bytt navn, stier og selektorer til lokale verdier.
  3. Kjør et lite testsett med både gyldig og ugyldig input.
  4. Dokumenter hva scriptet gjør når noe feiler.

Sikkerhet og kvalitet

Ikke stol på klientdata alene. Data som skal lagres eller brukes i filsystem, database eller publisert HTML må kontrolleres på server eller i en tilsvarende trygg rutine. Feilmeldinger bør være tydelige uten å lekke sensitive detaljer.

Kontroll før publisering

  • Koden er syntaktisk kontrollert.
  • Eksempelet har et konkret bruksområde.
  • Det finnes kravfelt og forklaring.
  • Det er tydelig hva som må endres lokalt.
  • Illustrasjon og tekst støtter samme tema.

Kilder og videre lesning