Där Linjer Break är Komplicerat. Här är alla Relaterade CSS och HTML.

0
43

Säg att du har en riktigt långa ord i en text på insidan av ett element som inte är stort nog att rymma det. En vanlig orsak är att det är en lång URL hitta det ‘ s väg in i kopia. Vad händer? Det beror på CSS. Hur som CSS är att styra layout och vad CSS är talande texten att göra.

Detta är vad en break-out-text situation kan vara:

Texten hanging out of the box är ett visuellt problem.

En möjlighet är overflow: hidden; vilket är lite av en trubbig kraft vapen som kommer att stoppa den text (eller något annat) från att hänga ut. Men, det gör texten lite otillgängliga. I vissa stationära datorer med en mus, kan du kanske trippel-klicka på linjen för att markera adressen och kopiera det, men du kan inte räkna med att alla vet att eller att det är möjligt i alla situationer.

Översvämningen är den rätta ordet här, eftersom det är precis vad det är som händer. Vi har overflow: auto; på vårt förfogande, som skulle utlösa en vågrät rullningslist. Kanske passar ibland, men jag föreställer mig att vi alla är överens om att det är i allmänhet inte en acceptabel lösning.

Vad vi vill är dang långa URL (eller en text av något slag) för att bryta till nästa rad. Det finns alternativ! Låt oss börja med att försöka räkna ut detta själva.

Experimentell Lekplats

Min idé här är att man kan ändra storlek på en panel av innehåll i kombination med en mängd olika CSS-egenskaper/värden som du kan växla mellan på och av för att se effekter på innehållet.

Detta är inte heltäckande eller perfekt utförd, jag är säker. Det är bara några av de egenskaper jag är medveten om.

Se Pennan Räkna Ut automatisk Radbrytning av Chris Coyier (@chriscoyier) på CodePen.

Slagnyckeln: “word-break: break-all;`

Gör orden till för att brytas någonstans. Word-break egendom inte “lösa” problemet:

p {
word-break: break-all;
}

I en mailkonversation med fantasi, hon förklarade att detta fungerar eftersom word-break egendom omdefinierar vad ett ord är. Paus-allt värde i huvudsak behandlar icke-CJK som CJK, som kan bryta nästan var som helst (förutom sånt perioder och nära parentes). Håll-alla-värde gör det omvända, att behandla CJK som icke-CJK.

En Subtil Fixa: `overflow-wrap: break-ord;`

Overflow-wrap egendom verkar vara den mest effektiva lösningen för de problem som vi har lagt ut:

p {
word-wrap: break-word; /* gamla namn */
overflow-wrap: break-ord;
}

Vid första anblicken kan det se mycket liknande till word-break: break-all; demo ovan, men märker hur i URL-adressen i stället för att bryta “penna” på “pen”, bryter vid slutet av ord där snedstrecket är. Trevligare.

fantasai förklarade:

“Om ett ord inte kan bryta och som därför skulle svämma över, då det kan bryta sig var som helst för att undvika spill.”

En Tyngre Fixa, Ibland: `bindestreck: auto;`

Bindestreck egendom gör vad du kan förvänta…gör det möjligt för avstavning i-radbrytningar. Bindestreck kan ibland göra susen i Webbadresser och långa ord, men det är inte garanterat. En lång rad skulle resa upp det, till exempel. Plus, bindestreck påverka all text, bryta ord mer villigt att hjälpa till att sms: a kram på att högra kanten jämnt.

p {
bindestreck: auto;
}

fantasai berättade för mig:

“Om ett” ord ” grenslar slutet av raden, vi kan avstava det.”

Jag antar att “ordet” hjälper till att sätta fingret på problemet där. Lite problematiskt långa strängar är inte “ord” så det kan inte räknas för att lösa alla spill frågor.

Framtida Slägga: “line-break: var som helst;`

Det är en egenskap som kallas line-break. Det är mest för skiljetecken, uppenbarligen, men jag kan inte se att det fungerar i alla webbläsare. fantasai säger mig att det kommer att bli ett nytt värde som kallas någonstans som är:

“som word-break: break-all; förutom att det bryter faktiskt allt som en dum terminal kund”

.

Andra HTML-Grejer

  • <Br> – elementet kommer att bryta en linje där det gör. Om det inte är display: none;!
  • Elementet är av “word-break möjlighet”, vilket innebär en långt ord som normalt skulle orsaka en irriterande overflow-problem kunde få veta att det är ok att bryta mot en viss punkt. Nyttigt! Det beter sig som ett noll-bredd utrymme.

Andra Saker CSS

  • &Shy; karaktär är precis som <wbr> – elementet.
  • Du kan injicera en radbrytning via psuedo elmement som ::innan { content: “”; } så länge elment inte är infogad (eller om det är, det behöver white-space: pre;)