Hur man lägger in text på en ny rad i CSS

Långa texter kan verka okontrollerbara under webbdesign. Men de kan också vara oundvikliga, och ibland hamnar de över gränserna. Detta kan skapa en lös Document Object Model (DOM) med ett onödigt överflöd 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 hjälp av CSS. Här visar vi dig hur du sveper in långa, obrutna texter med CSS.

Hur CSS Text Wrap fungerar

CSS hanterar långsträckta ord med det inbyggda ordomslag eller överflöd-wrap fast egendom.

hur man hittar övergivna platser att utforska

Men när de inte kontrolleras hanterar webbläsare så långa texter som standard. De kommer inte att slå in långa ord tills de får instruktionen att göra det.

Relaterat: Vad du behöver veta om DOM

De två stora CSS -egenskaperna som nämns tidigare fungerar på samma sätt och du kan använda dem omväxlande. De accepterar dock fyra värden eller syntaxer:

break-word : Detta är den faktiska CSS -syntaxen som säger till webbläsaren att linda en lång text över till en ny rad.
vanligt : Det bryter varje ord vid de normala separationspunkterna 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 : Det berättar för barnelementet att ärva egenskapen till sin förälder. Men det fungerar fortfarande inte med långa texter, förutom att du ansöker break-word till det överordnade elementet.

Hur man slår in långa ord med CSS Word Wrap

Att slå in ord till en ny rad med CSS är enkelt och kräver inte besvärliga CSS -tweaks för att fungera.

Till exempel det långa h2 text i textbehållaren i exempelbilden nedan går över gränsen:

Låt oss se hur vi kan slå in det på nästa rad med ordomslag CSS -egendom:

HTML :

  
This-div-contains-the-long-h2-lorem-text-demonstrated-in the image above

CSS :

.wrap-it{  
word-wrap: break-word;  
}

Efter inslagning av det långa h2 text i exempelbilden, här är utdata:

Det är allt! Du vet nu hur du slår in ord på en ny rad inom din DOM med CSS.

hur mycket kostar linkedin premium

Relaterat: Så här riktar du in en del av en webbsida med hjälp av CSS -väljare

Men som tidigare nämnts, ordomslag och överflöd-wrap arbeta på samma sätt och acceptera liknande egenskaper.

Att använda överflöd-wrap istället är det bara att byta ordomslag med det.

Det är viktigt att slå in ord på en webbsida

Förutom att lägga till mer estetik på din webbsida, komprimerar texter DOM. Även om du kontrollerar vad som ingår i ditt innehållsavsnitt 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 applicera textomslag på ett sådant avsnitt för att hålla DOM intakt.

varför krom tar så mycket minne

Dela med sig Dela med sig Tweet E-post Hur man använder mediefrågor i HTML och CSS för att skapa responsiva webbplatser

Vill du få din webbplats att se fantastisk ut på mobila enheter? Det är dags att lära sig hur man använder mediefrågor i CSS.

Läs Nästa Relaterade ämnen

Programmering
CSS
Dokumentobjektmodell

Om författaren Idisou Omisola(94 artiklar publicerade)

Idowu brinner för allt smart teknik och produktivitet. På fritiden leker han med kodning och byter till schackbrädet när han har tråkigt, men han älskar också att bryta sig från rutinen då och då. Hans passion för att visa människor vägen kring 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, gratis e -böcker och exklusiva erbjudanden!

Klicka här för att prenumerera