Pålitliga WordPress-handledningar, när du behöver dem som mest.
Nybörjarguide till WordPress
WPB-cupen
25 miljoner+
Webbplatser som använder våra plugins
16+
År av WordPress-erfarenhet
3000+
WordPress-handledningar
av experter

Hur man lägger till en radbrytning i WordPress (nytt radavstånd)

Har du märkt hur vissa webbplatser har perfekt avstånd mellan innehållet som är lätt att skanna, medan andra känns trånga och svårlästa?

Hemligheten handlar ofta om något enkelt: att använda nya rader och mellanrum effektivt.

Om du någonsin har lagt till radbrytningar i din WordPress-redigerare bara för att upptäcka att de inte visas på din publicerade sida, är du definitivt inte ensam. WordPress hanterar avstånd lite annorlunda än ordbehandlare som Google Docs eller Microsoft Word.

När du väl förstår hur det fungerar, har du dock fullständig kontroll över hur ditt innehåll ser ut.

Vi visar dig flera pålitliga metoder för att lägga till radbrytningar i WordPress, från snabba kortkommandon till mer avancerade formateringsalternativ.

Låt oss börja med de enklaste sätten att lägga till en radbrytning.

Hur man lägger till en radbrytning i WordPress

💡 Snabbt svar: Hur man lägger till en radbrytning i WordPress

Har du bråttom? Här är de 5 sätten som täcks i den här artikeln:

  • Lägg till dubbelt radavstånd (nytt stycke): Tryck på Enter/Return för automatiskt dubbelt mellanrum mellan stycken.
  • Lägg till enkelt radavstånd (samma stycke): Använd Shift + Enter/Return för att starta en ny rad inom samma stycke.
  • Använd Spacer Block (visuell kontroll): Dra och släpp ett Spacer block för exakt vertikalt mellanrum utan kod.
  • Använd ett plugin (ingen kodstyling): Ändra radavstånd och andra stilar enkelt med ett plugin för visuell CSS-redigering.
  • Lägg till anpassad CSS (avancerad kontroll): Skriv CSS-kod i anpassaren för att finjustera rad- och styckeavstånd.

Varför lägga till ett radbrytning i WordPress (nytt radavstånd)?

Vid första anblicken kan ett radbrytning verka som ett litet formateringsval – men det kan ha stor inverkan på hur ditt innehåll presterar.

Från att förbättra läsbarheten till att öka användarupplevelsen, hjälper korrekt avstånd dina sidor att se rena och professionella ut. Här är varför det är viktigt:

  • Bättre läsbarhet: Bryter upp textväggar för enklare skanning.
  • Mobilvänligt: Håller innehållet tydligt på mindre skärmar.
  • Rensar klistrad text: Rengör formatering från andra källor.
  • Väcker uppmärksamhet: Hjälper tips och CTA:er att sticka ut.

Kort sagt, radbrytningar gör ditt innehåll lättare att läsa och mer engagerande – både för besökare och sökmotorer.

Notera: Medan du kontrollerar *var* du lägger till nya rader och stycken, ställs den exakta mängden utrymme mellan rader inom ett stycke (radhöjd) och mellan stycken ofta in av ditt WordPress-tema.

Vi visar dig hur du lägger till nya rader och mellanrum med olika metoder, och sedan hur du finjusterar standardavståndsinställningarna i ditt tema om det behövs.

Med det sagt, låt oss titta på hur du enkelt lägger till en radbrytning i WordPress.

Hur man lägger till en radbrytning i WordPress (snabba metoder)

I WordPress kan du enkelt lägga till radbrytningar med ditt tangentbord. För att skapa ett dubbelt radavstånd (nytt stycke), tryck helt enkelt på Enter -tangenten (eller Return på Mac).

För ett enkelt radavstånd inom samma stycke, håll ner Shift + Enter (eller Shift + Return på Mac). Detta är de snabbaste sätten att kontrollera avstånd i blockredigeraren.

Hur man lägger till ett nytt stycke (standardavstånd)

När du trycker på Enter-tangenten (Windows) eller Return-tangenten (Mac) på ditt tangentbord skapar du vad som ofta kallas en "hård retur" eller en ny styckebrytning.

WordPress skapar ett nytt stycke. Som standard lägger ditt tema till lite vertikalt utrymme mellan stycken, vilket hjälper till att separera dina tankar och göra innehållet lättare att läsa.

Den exakta mängden av detta mellanrum styrs av ditt temas design.

Lägga till dubbelt radavstånd i WordPress

Gå bara till innehållseditor, tryck på Enter- eller Retur-tangenten efter raden och skriv sedan något annat på nästa rad.

Genom att bara göra det, baserat på din temas stil, bör du se en tydlig åtskillnad mellan stycken.

Dubbelt radavstånd lagt till för att skapa ett stycke i WordPress

Hur man lägger till ett enkelt radavstånd (mjuk retur / radbrytning inom stycke)

Om du skriver något som en adress eller en dikt och vill ha en enkelradig radbrytning utan att starta ett nytt stycke, behöver du använda en "mjuk retur".

Förhandsgranskning med enkelradsavstånd

I det här fallet måste du trycka på tangenterna SHIFT + ENTER på Windows eller SHIFT + RETURN på Mac.

Detta talar om för WordPress att du vill starta en ny rad men behålla den som en del av samma stycke.

Denna åtgärd skapar en "mjuk radbrytning" eller enskild radbrytning (med hjälp av en HTML <br> tagg), vilket innebär att det inte blir något extra vertikalt utrymme som du får med ett nytt stycke.

Det är en användbar metod för att rensa text som klistrats in från andra källor som kan ha överdrivna dubbla radbrytningar; ta helt enkelt bort de extra styckebrytningarna och infoga enskilda radbrytningar med Shift + Enter efter behov.

Enkla vs. dubbla radbrytningar i WordPress: En snabb jämförelse
Typ av brytningKortkommandoWordPress-tolkningVisuellt resultatBästa användningsområden
Dubbel radbrytning (Nytt stycke/Hård brytning)Enter (Windows) / Return (Mac)Startar ett nytt stycke och tillämpar standardavstånd för stycken från ditt tema.Lägger till ett märkbart mellanrum mellan textblock.✔Separera distinkta idéer
✔Starta nya stycken
✔Förbättra den övergripande läsbarheten
Enkel radbrytning (Ny rad/Mjuk brytning)Shift + Enter (Windows) / Shift + Return (Mac)Startar en ny rad *inom samma stycke*, utan att lägga till extra styckeavstånd.Skapar en ny rad direkt under den föregående, med minimalt vertikalt utrymme.✔Adresser
✔Poesi
✔Listor där objekt behöver interna radbrytningar
✔Korta fraser som hör ihop

Att förstå dessa skillnader ger dig exakt kontroll över ditt innehålls layout och läsbarhet.

Lägga till anpassat vertikalt mellanrum med Spacer Block

För ett enkelt sätt att lägga till extra utrymme mellan två block utan kod, är det inbyggda "Spacer"-blocket en mycket intuitiv metod. Det ger exakt visuell kontroll direkt i redigeraren.

Klicka helt enkelt på knappen 'Lägg till block' i redigeraren för att lägga till ett nytt block och sök efter 'Spacer'. När du har lagt till det kommer ett nytt tomt utrymme att visas på din sida.

Lägg till Spacer-blocket i WordPress

Du kan sedan klicka på avståndsskaparen och dra det blå handtaget uppåt eller nedåt för att justera dess höjd.

Detta ger dig exakt kontroll över ditt vertikala avstånd direkt i redigeraren.

Spacer fungerar i blockredigeraren

Justera standardradhöjd och styckeavstånd

Ibland, även när du lägger till rätt radavstånd i redigeraren, visas det inte som du vill i ditt tema.

Det finns två sätt att åtgärda det:

  1. Använda ett plugin (det enkla sättet)
  2. Manuellt med CSS-kod (mer avancerat)

Låt oss titta på den enkla metoden först.

Lägga till radavstånd med en plugin

Om du vill göra stiländringar i ditt tema utan att behöva lära dig kod, är det ett bra sätt att använda ett plugin som CSS Hero. Detta beror på att pluginet litar på av över 100 000 webbplatser för sin intuitiva visuella redigerare.

CSS Hero är specifikt utformat för nybörjare och icke-kodare, vilket gör att du visuellt kan ändra din WordPress-webbplats design med några få klick – en funktion som hyllas mycket i dess genomsnittliga betyg på 4,8/5 stjärnor.

Lägg till styckeavstånd i WordPress med CSS Hero

Du kan se mer information i vår fullständiga recension av CSS Hero.

För mer omfattande strukturella ändringar av ditt tema, som att flytta en sidopanel eller lägga till en sidfot, erbjuder ett dra-och-släpp-sidbyggarplugin mer omfattande visuell kontroll och dedikerade verktyg. Detta gör det till ett mer lämpligt alternativ för dessa uppgifter.

Vill du inte använda ett plugin, eller bara göra den här enda ändringen? Då kan alternativet med manuell CSS-kod vara bäst för dig.

Ändra styckeavstånd manuellt med CSS-kod

För att lägga till radbrytningar manuellt utan ett plugin behöver du lägga till lite CSS till ditt tema.

CSS (Cascading Style Sheets) är ett språk som talar om för webbläsare hur de ska visa din webbplats innehåll.

Tänk på det som en uppsättning instruktioner för styling, snarare än att klicka på knappar som i Microsoft Word. Det är inte så skrämmande som det låter och är ganska lätt att förstå när du väl greppat grunderna.

För att lägga till anpassad CSS till ditt tema behöver du besöka sidan Utseende » Anpassa. Detta startar WordPress temaanpassare, där du behöver klicka på fliken 'Ytterligare CSS' från den vänstra kolumnen.

Om du inte ser dessa menyalternativ kan du använda ett blocktema. Se vår artikel om hur du åtgärdar saknad temaanpassare i WordPress-admin.

Lägga till din anpassade CSS

I rutan för anpassad CSS måste du lägga till följande CSS-kod:

.post p{line-height: 1.5em;}

Denna regel ökar utrymmet mellan rader inuti varje stycke, vilket gör ditt innehåll lättare att läsa.

Tänk på att denna kod förutsätter att ditt tema använder .post för blogginnehåll. Om inget ändras efter att du har lagt till den, försök att ersätta .post med .entry-content istället.

Om du är osäker på vilken din tema använder kan du kontrollera genom att öppna ett blogginlägg, högerklicka inuti texten och välja Inspektera. Leta sedan efter klassen för huvudinnehållsomslaget (som .post eller .entry-content).

Lägga till anpassad CSS för att öka radhöjden

Observera att denna line-height -egenskap endast justerar det vertikala utrymmet mellan textrader inom varje stycke, inte utrymmet mellan hela stycken.

Om du vill öka det vertikala utrymmet mellan stycken i WordPress, skulle du vanligtvis lägga till padding-bottom till dina stycke-element.

.post p { 
line-height: 1.5em;
padding-bottom: 15px;
} 

Justera gärna siffrorna i denna CSS-kod. Att ändra padding-bottom -värdet kommer att ändra utrymmet mellan dina stycken.

Du kan också lägga till anpassad CSS på din webbplats med hjälp av WPCode-pluginet. Det används av över 1,5 miljoner webbplatser och har ett betyg på 4,9/5 stjärnor på WordPress.org för att göra kodinfogning superenkel.

För mer information, se vår guide om hur du lägger till anpassad CSS till din WordPress-webbplats.

Om du inte gillar att läsa instruktionerna, titta bara på vår videoguide.

Videohandledning

För en visuell genomgång kan du titta på vår videoguide nedan. Den täcker alla metoder vi har diskuterat för att lägga till enkel- och dubbelradsavstånd i ditt innehåll.

Prenumerera på WPBeginner

Vanliga frågor om att lägga till en radbrytning i WordPress

Här är några frågor som våra läsare ofta har ställt om att lägga till en radbrytning i WordPress:

Hur gör man 1,15 radavstånd i WordPress?

Du kan ställa in 1,15 radavstånd genom att lägga till anpassad CSS i ditt barntema eller använda ett kodavsnittsprogram som WPCode. Använd till exempel line-height: 1.15; för textelementen du vill justera.

Detta ger dig exakt kontroll eftersom WordPress inte inkluderar detta alternativ som standard.

Är 1,5 och 1,15 radavstånd samma?

Nej, 1,5 och 1,15 avstånd är olika. En 1,5 radhöjd skapar mycket mer utrymme mellan rader, medan 1,15 håller texten tätare och mer kompakt.

Hur lägger man till anpassat radavstånd i WordPress?

Du kan lägga till anpassat radavstånd med hjälp av CSS eller en inställning i blockredigeraren. I de flesta fall är det enklaste metoden att lägga till ett line-height-värde i din temaanpassare eller ett CSS-plugin.

Vad är skillnaden mellan en avdelare och en radbrytning i WordPress?

En avdelare lägger till en synlig linje eller ett utrymme mellan sektioner, medan en radbrytning helt enkelt flyttar text till nästa rad utan att lägga till extra visuella element.

Hur åtgärdar man oönskade radbrytningar i WordPress-titlar?

Ibland kan din WordPress-inläggs- eller sidtitel brytas på flera rader på ett obekvämt sätt. Detta beror vanligtvis på ditt tema och det tillgängliga utrymmet i titelområdet.

I de flesta fall bryter WordPress automatiskt långa titlar för att passa layouten. Men om du vill ha mer kontroll kan du justera det med CSS.

Till exempel kan du förhindra radbrytningar i titlar genom att lägga till:

.entry-title {  white-space: nowrap;}

Detta kommer att hålla titeln på en enda rad, men var försiktig – mycket långa titlar kan flyta över på mindre skärmar. Ett bättre tillvägagångssätt är vanligtvis att förkorta titeln eller justera ditt temas typografiinställningar istället för att tvinga den till en enda rad.

Vi hoppas att den här artikeln hjälpte dig att lägga till en radbrytning i WordPress. Du kanske också vill se vår guide om hur du använder WordPress blockmönster och vår lista över de bästa Gutenberg-vänliga WordPress-teman.

Om du gillade den här artikeln, prenumerera gärna på vår YouTube-kanal för WordPress-videoguider. Du kan också hitta oss på Twitter och Facebook.

Avslöjande: Vårt innehåll stöds av läsarna. Det betyder att om du klickar på några av våra länkar kan vi tjäna en provision. Se hur WPBeginner finansieras, varför det är viktigt och hur du kan stödja oss. Här är vår redaktionella process.

Det ultimata WordPress-verktyget

Få GRATIS tillgång till vår verktygslåda - en samling WordPress-relaterade produkter och resurser som alla proffs bör ha!

Läsarnas interaktioner

99 kommentarerLämna ett svar

  1. Jag har ingen Ytterligare CSS. Jag har provat alla möjliga andra sätt att ändra radavståndet men inget fungerar, det ser ut som en riktig röra. Hjälp tack!!!

  2. Tack för hjälpen. Jag har letat överallt och ville göra det med ett plugin. Du gjorde det så enkelt. Tack igen så mycket.

  3. Hej! Jag vill ha ett enkelt avstånd mellan mina stycken och även efter att ha tryckt på enter (för dubbelt mellanslag), när jag förhandsgranskar utkastet har inget ändrats (det är fortfarande ett enda stycke). Kan någon hjälpa till?

  4. Hej
    Jag skulle vilja ändra radhöjden och avståndet. Det finns dock ingen 'redigeringsikon' (Utseende » Redigerare) från temat CSS-fil.
    Så, vad kan jag göra?
    Tack för ditt svar!

  5. Wow. Visste inte att det var så enkelt. Tack så mycket! Detta dubbla mellanslag höll på att göra mig galen! :D

  6. Tack, tack, tack!

    Jag var i en annan HTML-redigerare och kunde inte lista ut hur man gör enkel avståndstagning.

    Du räddade dagen! :)

  7. Strålande och en evig livräddare.

    Jag kämpade med mellanrum på en av mina klienters webbplatser och det är helt fantastiskt att du hade det exakta svaret nästan till hands. Jag blir nu en permanent prenumerant

  8. Tack för alla Wordpress-tips. Den här sidan har hjälpt mig mycket med de flesta svårigheter jag hade

  9. Jag använder Pilcrow-temat och jag har ingen aning om hur jag ska få dubbelt mellanslag mellan stycken. Ibland händer det i mina inlägg men ibland inte. När jag tittar i HTML-filen ser jag inga inlägg p eller padding. Jag ser bara slutresultatet av hur inlägget kommer att se ut och då vet jag att dubbla mellanrummet inte fungerade. Kan jag fortfarande gå tillbaka och redigera och fixa det? Sist men inte minst, där du säger att gå från utseende till redigeringsmenyer har jag inte de alternativen.
    Jag har under utseende följande alternativ: teman, anpassa, widgets, menyer, header, bakgrund, AMP, temainställningar, mobil.
    Snälla hjälp.

  10. Mitt tema är trasigt, som i att det inte har dubbelt avstånd som standard. Temat är fast i shift+enter-läget med andra ord. Så i relation till följande kod:

    .post p { line-height: 1.5em; padding-bottom: 15px; }

    Är 15px ett normalt standard dubbelt avstånd? Hur många pixlar bör det vara som standard? Spelar det inte heller någon roll var jag placerar den här koden? Tack!

  11. Tack för tipset om Shift + Enter. Jag visste inte detta på flera år. Din webbplats har alltid varit en räddning när jag fastnar.

  12. Hej: Hur får man anpassat radavstånd (säg, 1.5em) för en enskild instans på en sida istället för att ändra hela temats CSS? Jag ser att två andra personer har frågat samma sak utan svar, åtminstone inte som jag hittade. Tack!

  13. Jag satte p-marginalerna till noll. I din CSS skulle det vara något i stil med p {margins: 0; }

  14. Shift+Enter för att undvika stort mellanrum mellan rader i wysywig tinye mce-redigeraren i WordPress. Fungerar !!!! Fantastiskt!

  15. Vad sägs om att helt enkelt lägga till lite text och ändra textfärgen till vit (om bakgrunden är vit)? Detta bör göra det möjligt att skapa och anpassa radavstånd mycket enklare (om inte bakgrunden, naturligtvis, är en bild av något som inte kan matchas med teckensnittsfärg).

  16. Hej WPBeginner-personal,

    Jag har en annan fråga. Jag använder Visual Composer och har lagt till många avdelare med text mellan mina sektionsrubriker på min startsida. Jag skulle vilja att dessa textrubriker också skulle vara en länk till den sektionen.
    Men varje gång jag lägger till länken förlorar jag den sektionsidentifierande texten som jag hade i avdelaren och den ersätts magiskt med standardtexten "TITLE".

    För att försöka göra det till en länk lägger jag till länk koden inuti denna hakparentes:
    [vc_text_separator title=”BILAR FRÅN 1950-TALET”]

    Jag kliar mig i huvudet så hårt att jag tror att jag är flintskallig. All hjälp kommer att ge dig en livstids tacksamhet!!!

    Tack,
    Mike

  17. Jag använder WordPress-temat 'Divi' och upptäckte att om du trycker på enter (eller shift + enter) två gånger, för att skapa ett större utrymme, ignoreras det. För att komma runt detta, tryck enter en gång, skriv en tecken på raden, (det spelar ingen roll vilken), markera den och ändra teckenfärgen på tecknet till vit och tryck sedan enter igen; detta resulterar i önskat utrymme mellan raderna utan att behöva redigera temat. Detsamma gäller för extra utrymmen i en rad; ange så många tecken som önskas, markera dem och ändra deras teckenfärg till vit och fortsätt sedan i önskad teckenfärg.

    • Strålande tips! Tack så mycket för detta, du räddade mig från många huvudvärk och besvär Anthony!

  18. THANK YOU!! I Love you guys! So glad I found this site! I’ve almost literally been banging my head against the wall. If I knew how to insert emojis, this post would be covered with hearts and smiley faces. :-)

    • P.S. ~ HA! Jag visste INTE att min lilla kolon och parentes faktiskt skulle förvandlas till ett smiley-ansikte. LOL

  19. Åh ja! Du har precis hjälpt mig att lösa ett problem (tvingat enkelt avstånd mellan stycken) som har gäckat mig i åratal!

  20. Jag är prenumerant på WP Beginner.
    Jag hade en fråga angående inmatning av ingenjörsdata för min produkt på min webbplats. Utrymmet i tabellerna verkade för stort på sidan. Jag sökte i Wordpress support och allt jag såg var kortfattade svar på frågan om enkelradsavstånd.

    Du är den första att svara på frågan, och det var uppenbarligen korrekt. Tack.

    Med vänliga hälsningar,

    Dave

  21. Vad sägs om Android. Den senaste uppdateringen har tvingat fram dubbelt radavstånd (nytt stycke). Inte särskilt bra för poetskrivare. Finns det något sätt att återställa det till enkelradsavstånd?

  22. Jag använder Omega Theme och Ctrl/Enter fungerar inte. Finns det något annat jag kan göra. Jag kan inte hitta post.p i CSS-filen.

  23. Tack för "skiftet" och enter för enkelradsavstånd eftersom jag har velat lista ut detta i år ... och aldrig kommit till att hitta lösningen.

  24. Jag letar överallt efter ett svar... när jag lägger till en
    i textredigeraren tas den bort i den visuella redigeraren. Det driver mig till vansinne. Har wpbeginner någon rekommendation?

    Ska jag lägga till ett plugin för att stoppa detta?

    Jag provade ett plugin för flera år sedan, men jag var tvungen att gå tillbaka och formatera om varje inlägg.

    Alla länkar med handledning eller råd uppskattas mycket!

  25. Tack för sådana underbara artiklar
    Jag var helt vilse när jag började med wordpress men nu har jag en ganska grundläggande uppfattning
    Tack :)

  26. Tack! Detta hjälpte mig att strama upp mina inlägg – förutom det första stycket i varje inlägg. Av någon anledning verkar raderna vara dubbelradiga. Finns det en kodsnutt som jag kan lägga till i Redigera CSS som skulle tillåta mig att strama upp dem?

  27. Tack! Att lägga till kodavsnittet (.post p{line-height: 1.5em;}) i min Edit CSS gjorde min text mycket lättare att läsa. Nu, här är mitt problem: det första stycket i varje WordPress-inlägg har mycket större radavstånd än resten av styckena – och det påverkas INTE av denna radhöjdskod. Finns det ett annat kodavsnitt som jag skulle kunna lägga till i Edit CSS som skulle dra ihop dessa inledande rader?

  28. Tack så mycket. Er webbplats är anmärkningsvärd. Den har hjälpt mig så mycket. Prenumererad!! Fortsätt med det fantastiska arbetet!!

  29. Tack för handledningen. Hur kan jag dock justera radavståndet för enstaka stycken? Jag har en titel på 3 ord, centrerad och staplad på 3 rader. Alla rader har olika teckenstorlek, så radavstånden är inkonsekventa. Jag har letat efter ett sätt att enkelt justera genom ett textredigeringsverktyg eller plugin.

    Några idéer?

  30. Hittade .post p du använde en sökruta. Kan du berätta för mig hur jag hittar den sökrutan? Tack4

  31. "Om du inte hittar .post p-taggen, skapa en helt enkelt."
    Var? ska jag bara kopiera/klistra in den var som helst i css-filen?

  32. Jag är inte ens en riktig "nybörjare" men det finns luckor i min kunskap och du har precis löst en av de mest frustrerande sakerna med WP för den här skribenten och Word-användaren… Tack för detta och för all din fantastiska information… Jag fortsätter att lära mig fantastiska saker från dina inlägg och din webbplats. Tack och skål för dig!

Lämna ett svar

Tack för att du väljer att lämna en kommentar. Tänk på att alla kommentarer modereras enligt vår kommentarpolicy, och din e-postadress kommer INTE att publiceras. Använd INTE nyckelord i namn fältet. Låt oss ha en personlig och meningsfull konversation.