Hvor Linjer Pause er Komplisert. Her er alle i Slekt CSS og HTML.

0
18

Si du har en veldig lang ord i en tekst inne i et element som ikke er bredt nok til å holde det. En vanlig årsak til at det er en lang URL finne den veien inn kopi. Hva skjer? Det avhenger av CSS. Slik at CSS er å styre layout og hva CSS er å fortelle teksten å gjøre.

Dette er hva en break-out tekst situasjonen kan være slik:

Teksten henger ut av boksen er et visuelt problem.

En mulighet er overflow: hidden; noe som er litt av en blunt force våpen som vil stoppe tekst (eller noe annet) fra hengende ut. Likevel, det gjør teksten litt utilgjengelige. I noen datamaskiner med en mus, kan du være i stand til trippel-klikk på linjen for å velg URL-adressen og kopier den, men du kan ikke stole på alle vite det, eller at det er mulig i alle scenarier.

Overløp er det rette ordet her, så vel som det er akkurat hva som skjer. Vi har overløp: auto; på vår disposisjon, som ville utløse en vannrette rullefeltet. Kanskje passer noen ganger, men jeg kan tenke meg vi er alle enige om at er generelt ikke en akseptabel løsning.

Hva vi ønsker er dang lange URL-en (eller tekst av noe slag) til pause til neste linje. Det finnes alternativer! La oss starte med et sted for å forsøke å finne denne ting ut.

Eksperimentell Lekeplass

Ideen min her er å ha en resizeable panel av innhold kombinert med et utvalg av CSS eiendom/verdier som du kan slå på og av for å se effekter på innholdet.

Dette er ikke omfattende eller perfekt utført, er jeg sikker på. Det er bare noen av de egenskapene jeg er klar over.

Se Pen å Finne Ut Line-Wrapping av Chris Coyier (@chriscoyier) på CodePen.

Den Slegge: `word-break: break-all;`

Gjør ord til å bli brutt hvor som helst. Word-break eiendom ikke “løse” problemet:

p {
word-break: break-all;
}

I en e-post utveksling med fantasi, hun forklarte at dette fungerer fordi word-break eiendom redefinerer hva et ord er. Break-all verdi i hovedsak behandler ikke-CJK som CJK, som kan bryte omtrent hvor som helst (bortsett fra ting som perioder og høyre parentes). At-alle-verdien gjør det motsatte, behandling CJK som ikke-CJK.

En Subtil Korriger: `overløp-wrap: break-ord;`

Overløp wrap-holderen ser ut til å være den mest effektive løsningen for problemene vi har lagt ut:

p {
word-wrap: break-word; /* gammelt navn */
overflow-wrap: break-ord;
}

Ved første øyekast kan det se veldig lik word-break: break-all; demo ovenfor, men legg merke til hvordan i URL-snarere enn å bryte “pennen” på “pen”, det bryter på slutten av ordet der slash er. Hyggeligere.

fantasai forklart:

“Hvis et ord ikke kan bryte, og ville derfor overløp, da det kan ødelegge hvor som helst for å unngå overløp.”

En Tyngre Løs, noen Ganger: `bindestrek: auto;`

Den bindestrek eiendom gjør hva du kan forvente…mulighet for orddeling i linjeskift. Bindestrek kan noen ganger gjøre triks i Nettadresser og lange ord, men det er ikke garantert. En lang rekke ville reise det opp, for eksempel. Plus, bindestrek påvirke all tekst, bryte ord mer villig til å hjelpe tekst klem som høyre kant jevnt.

p {
bindestrek: auto;
}

fantasai fortalte meg:

“Hvis en “ord”, ligger på enden av linjen, kan vi orddeling i det.”

Jeg antar at “ordet” bidrar til å sette en finger på problemet der. Noen problematically lange strenger er ikke “ord”, slik at det ikke kan telles på å løse alle overløp problemer.

Fremtiden Slegge: `line-break: hvor som helst;`

Det er en egenskap som heter line-break. Det er for det meste for tegnsetting, tilsynelatende, men jeg kan ikke synes å se at det fungerer i alle nettlesere. fantasai forteller meg at det vil bli en ny verdi som kalles hvor som helst, som er:

“som word-break: break-all; bortsett fra at det faktisk bryter alt som er en dum terminal klienten”

.

Andre Ting HTML

  • <Br> – element vil bryte en linje hvor det gjengis. Med mindre det er display: none;!
  • Elementet er en “word-break mulighet”, som betyr et langt ord som normalt ville føre til en irriterende overløp problemet kan bli fortalt at det er ok å bryte på et visst punkt. Nyttig! Det oppfører seg som et null-bredde plass.

Andre Ting CSS

  • For &shy; karakter er akkurat som <wbr> – element.
  • Du kan sette inn et linjeskift via psuedo elmement som ::før { innhold: “”;} så lenge elment er ikke inline (eller hvis det er det, det må white-space: pre;)