Stora delar av texten bryter stilen eller layouten på din webbplats? Så här radbryter du text med CSS.
Långa texter kan verka okontrollerbara under webbdesign. Men de kan också vara oundvikliga och ibland går de över gränser. Detta kan skapa en lös Document Object Model (DOM) med ett onödigt spill som inte är användarvänligt.
Men här är de goda nyheterna: du kan hantera så långa texter genom att slå in dem på en ny rad med CSS. Här visar vi hur du slår in långa, obrutna texter med CSS.
Hur CSS Text Wrap fungerar
CSS hanterar utsträckta långa ord med hjälp av den inbyggda ord-wrap eller overflow-wrap fast egendom.
Men när de inte kontrolleras hanterar webbläsare sådana långa texter som standard. De kommer inte att slå in långa ord förrän de får instruktionen att göra det.
De två stora CSS-egenskaperna som nämnts tidigare fungerar på samma sätt och du kan använda dem omväxlande. De accepterar dock fyra värden eller syntaxer:
brytord: Detta är den faktiska CSS-syntaxen som säger åt webbläsaren att slå en lång text över till en ny rad. vanligt: Det bryter varje ord vid de normala separeringspunkterna inom en DOM. Det har ingen effekt på långa strängar. första: Det är standardwebbläsarens sätt att hantera strängar. Som vanligt syntax, det bryter inte långa ord. ärva: Den talar om för det underordnade elementet att ärva egenskapen till sin överordnade. Men det fungerar ändå inte med långa texter, förutom att du ansöker brytord till det överordnade elementet.
Hur man radbryter långa ord med CSS-ordbrytning
Att slå in ord till en ny rad med CSS är enkelt och kräver inga besvärliga CSS-justeringar för att fungera.
Till exempel den långa h2 text i textbehållaren i exempelbilden nedan korsar gränslinjen:
Låt oss se hur vi kan slå in det på nästa rad med hjälp av ord-wrap CSS-egenskap:
HTML:
<div class="wrap-it">
This-div-contains-the-long-h2-lorem-text-demonstrated-in the image above
</div">
CSS:
.wrap-it{
word-wrap: break-word;
}
Efter att linda den långa h2 text i exempelbilden, här är utdata:
Det är allt! Du vet nu hur du lindar ord på en ny rad inom din DOM med CSS.
Men som sagt tidigare, ord-wrap och overflow-wrap arbeta på samma sätt och acceptera liknande egenskaper.
Att använda overflow-wrap istället är det bara att byta ut ord-wrap med det.
Det är viktigt att slå in ord på en webbsida
Förutom att lägga till mer estetik till din webbsida, komprimerar textinslag DOM. Även om du kontrollerar vad som kommer in i din innehållssektion kan användare lägga upp länkar eller andra ord som inte passar in i din textbehållare eller hela din DOM.
Därför är det nödvändigt att tillämpa textbrytning på ett sådant avsnitt för att hålla DOM intakt.
Om författaren
Idowu Omisola (124 artiklar publicerade)
Idowu brinner för allt smart teknik och produktivitet. I hans free tid, han leker med kodning och byter till schackbrädet när han har tråkigt, men han älskar också att bryta sig loss från rutinen då och då. Hans passion för att visa människor vägen runt modern teknik motiverar honom att skriva mer.
Mer från Idowu Omisola
Prenumerera på vårt nyhetsbrev
Gå med i vårt nyhetsbrev för tekniska tips, recensioner, free e-böcker och exklusiva erbjudanden!
Klicka här för att prenumerera
