{"id":91311,"date":"2022-10-11T17:25:32","date_gmt":"2022-10-11T22:25:32","guid":{"rendered":"https:\/\/blogging-techies.com\/sw\/hur-man-radbryter-text-pa-en-ny-rad-i-css\/"},"modified":"2022-10-11T17:25:32","modified_gmt":"2022-10-11T22:25:32","slug":"hur-man-radbryter-text-pa-en-ny-rad-i-css","status":"publish","type":"post","link":"https:\/\/blogging-techies.com\/sw\/hur-man-radbryter-text-pa-en-ny-rad-i-css\/","title":{"rendered":"Hur man radbryter text p\u00e5 en ny rad i CSS"},"content":{"rendered":"
\n

Stora delar av texten bryter stilen eller layouten p\u00e5 din webbplats? S\u00e5 h\u00e4r radbryter du text med CSS.<\/p>\n

\n<\/figure>\n

L\u00e5nga texter kan verka okontrollerbara under webbdesign. Men de kan ocks\u00e5 vara oundvikliga och ibland g\u00e5r de \u00f6ver gr\u00e4nser. Detta kan skapa en l\u00f6s Document Object Model (DOM) med ett on\u00f6digt spill som inte \u00e4r anv\u00e4ndarv\u00e4nligt.<\/p>\n

Men h\u00e4r \u00e4r de goda nyheterna: du kan hantera s\u00e5 l\u00e5nga texter genom att sl\u00e5 in dem p\u00e5 en ny rad med CSS. H\u00e4r visar vi hur du sl\u00e5r in l\u00e5nga, obrutna texter med CSS.<\/p>\n

<\/span> Hur CSS Text Wrap fungerar<\/span><\/h2>\n

CSS hanterar utstr\u00e4ckta l\u00e5nga ord med hj\u00e4lp av den inbyggda ord-wrap<\/strong> eller overflow-wrap<\/strong> fast egendom.<\/p>\n

Men n\u00e4r de inte kontrolleras hanterar webbl\u00e4sare s\u00e5dana l\u00e5nga texter som standard. De kommer inte att sl\u00e5 in l\u00e5nga ord f\u00f6rr\u00e4n de f\u00e5r instruktionen att g\u00f6ra det.<\/p>\n

De tv\u00e5 stora CSS-egenskaperna som n\u00e4mnts tidigare fungerar p\u00e5 samma s\u00e4tt och du kan anv\u00e4nda dem omv\u00e4xlande. De accepterar dock fyra v\u00e4rden eller syntaxer:<\/p>\n

brytord<\/strong>: Detta \u00e4r den faktiska CSS-syntaxen som s\u00e4ger \u00e5t webbl\u00e4saren att sl\u00e5 en l\u00e5ng text \u00f6ver till en ny rad. vanligt<\/strong>: Det bryter varje ord vid de normala separeringspunkterna inom en DOM. Det har ingen effekt p\u00e5 l\u00e5nga str\u00e4ngar. f\u00f6rsta<\/strong>: Det \u00e4r standardwebbl\u00e4sarens s\u00e4tt att hantera str\u00e4ngar. Som vanligt<\/strong> syntax, det bryter inte l\u00e5nga ord. \u00e4rva<\/strong>: Den talar om f\u00f6r det underordnade elementet att \u00e4rva egenskapen till sin \u00f6verordnade. Men det fungerar \u00e4nd\u00e5 inte med l\u00e5nga texter, f\u00f6rutom att du ans\u00f6ker brytord<\/strong> till det \u00f6verordnade elementet. <\/p>\n

<\/span> Hur man radbryter l\u00e5nga ord med CSS-ordbrytning<\/span><\/h2>\n

Att sl\u00e5 in ord till en ny rad med CSS \u00e4r enkelt och kr\u00e4ver inga besv\u00e4rliga CSS-justeringar f\u00f6r att fungera.<\/p>\n

Till exempel den l\u00e5nga h2<\/strong> text i textbeh\u00e5llaren i exempelbilden nedan korsar gr\u00e4nslinjen:<\/p>\n

\n<\/figure>\n

L\u00e5t oss se hur vi kan sl\u00e5 in det p\u00e5 n\u00e4sta rad med hj\u00e4lp av ord-wrap<\/strong> CSS-egenskap:<\/p>\n

HTML<\/strong>:<\/p>\n

<div class=\"wrap-it\">This-div-contains-the-long-h2-lorem-text-demonstrated-in the image above<\/div\"> <\/pre>\n
CSS<\/strong>:<\/p>\n
.wrap-it{word-wrap: break-word;}<\/pre>\n
Efter att linda den l\u00e5nga h2<\/strong> text i exempelbilden, h\u00e4r \u00e4r utdata:<\/p>\n
\n<\/figure>\n
Det \u00e4r allt!  Du vet nu hur du lindar ord p\u00e5 en ny rad inom din DOM med CSS.<\/p>\n
Men som sagt tidigare, ord-wrap<\/strong> och overflow-wrap<\/strong> arbeta p\u00e5 samma s\u00e4tt och acceptera liknande egenskaper.<\/p>\n
Att anv\u00e4nda overflow-wrap<\/strong> ist\u00e4llet \u00e4r det bara att byta ut ord-wrap<\/strong> med det.<\/p>\n
<\/span>  Det \u00e4r viktigt att sl\u00e5 in ord p\u00e5 en webbsida<\/span><\/h2>\n
F\u00f6rutom att l\u00e4gga till mer estetik till din webbsida, komprimerar textinslag DOM.  \u00c4ven om du kontrollerar vad som kommer in i din inneh\u00e5llssektion kan anv\u00e4ndare l\u00e4gga upp l\u00e4nkar eller andra ord som inte passar in i din textbeh\u00e5llare eller hela din DOM.<\/p>\n
D\u00e4rf\u00f6r \u00e4r det n\u00f6dv\u00e4ndigt att till\u00e4mpa textbrytning p\u00e5 ett s\u00e5dant avsnitt f\u00f6r att h\u00e5lla DOM intakt.<\/p>\n
    Om f\u00f6rfattaren<\/strong><\/p>\n
            Idowu Omisola (124 artiklar publicerade)
<\/strong><\/p>\n
Idowu brinner f\u00f6r allt smart teknik och produktivitet.  I hans free tid, han leker med kodning och byter till schackbr\u00e4det n\u00e4r han har tr\u00e5kigt, men han \u00e4lskar ocks\u00e5 att bryta sig loss fr\u00e5n rutinen d\u00e5 och d\u00e5.  Hans passion f\u00f6r att visa m\u00e4nniskor v\u00e4gen runt modern teknik motiverar honom att skriva mer.<\/p>\n
                            Mer fr\u00e5n Idowu Omisola<\/p>\n
<\/span>Prenumerera p\u00e5 v\u00e5rt nyhetsbrev<\/span><\/h4>\n
G\u00e5 med i v\u00e5rt nyhetsbrev f\u00f6r tekniska tips, recensioner, free e-b\u00f6cker och exklusiva erbjudanden!<\/p>\n
Klicka h\u00e4r f\u00f6r att prenumerera<\/p>\n<\/p><\/div>\n  
\n
\n
Table of Contents<\/p>\nToggle<\/span><\/path><\/svg><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n