How to Add a Line Break in WordPress New Line Spacing

Do you want to add a line break in WordPress? By clicking the enter key a few times in most Word processors, you may quickly add extra blank line space. You may also use the formatting settings to create double-spaced lines after paragraphs. Those buttons, however, are not available in the WordPress block editor.

The text editor appears to delete the line break by itself after upgrading WordPress to version 3.2. The formatting is applied while typing in the text editor, and all line breaks are visible in the preview. When you save the content and try to see the page, however, all of the paragraph and line break tags appear to vanish. When you add extra spacing in the text editor, WordPress strips out the relevant tags. As a result, when you save the properly formatted text page you made, all excess spacing and blank lines are erased, and the page looks completely different.

We’ll show you how to effortlessly add a line break in WordPress in this article.

Before we get started, keep in mind that line spacing is determined by the WordPress theme you’re using. We’ll show you how to add space between blocks in the block editor and then modify the line spacing in your theme if you don’t like the results.

Inserting double-line space between blocks.

When you add a line break by pressing the ‘Enter’ key, the WP visual editor considers it as a new paragraph. This implies that it will automatically add double line spacing if your theme has the necessary styling (all good WordPress themes do).

Simply put something else in the next line after pressing Enter on the previous line.

Image shows WP visual editor

You should be able to discern a clear separation between paragraphs by merely doing that, depending on your theme layout (i.e., double line spacing).

Image shows Testing Line Spacing

Inserting a Single Line Space

If you’re writing an address, you’ll usually want to write it single-spaced rather than double-spaced.

Image shows add a line break in WordPress

In this scenario, you must hit the keys SHIFT + ENTER.

This tells WordPress that you wish to start a new line within an existing paragraph. Therefore single line spacing is required rather than the double line spacing.

Adjusting the Line height and spacing

Even when you use the right line spacing in the editor, it may not appear in your theme the way you want it to.

You have two for resolving the issue:

  • Making use of a plugin (the easy way)
  • Manually with CSS code (advanced).

First, let’s look at the simple technique.

Using a Plugin to Add Line Spacing

Using a plugin like CSS Hero to make style changes to your theme without learning code is the best way to go.

CSS Hero allows you to change the look of your WordPress site without having to know how to code. As well as lets you add paragraph spacing.

Image shows a plugin like CSS Hero

A drag and drop page builder plugin will be a better alternative if you want to make larger modifications to your theme, such as moving a sidebar or adding a footer. A page builder plugin would also allow you to make minor changes to your WordPress site, such as changing font colors or adding line breaks.

Using CSS Code to Manually Change Paragraph Spacing

You’ll need to add some CSS to your theme to manually add line breaks without using a plugin.

CSS is similar to Microsoft Word’s formatting function. You’ll be writing simple CSS code instead of clicking buttons. It is not as frightening as some newcomers may believe. If you just follow the instructions, CSS is really simple to grasp.

You must go to the Appearance » Customize tab to apply custom CSS to your theme. This will open the WordPress theme customizer, where you should select the ‘Additional CSS’ tab in the left column.

Image shows Customize tab

You must enter the following CSS code in the custom CSS box:

 

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

Image shows Customize tab

The line spacing of paragraph text will be changed to 1.5em using the CSS rule mentioned above. For typography, Em is a unit of width. We’re using the .post class, which WordPress adds to the content area of all posts by default to ensure that it only impacts posts and not other paragraphs.

This now only affects single spacing. Padding is required if you wish to adjust the paragraph spacing in WordPress (i.e., double spacing).

 

1

2

3

4

.post p {

line-height: 1.5em;

padding-bottom: 15px;

}

Feel free to change the numbers to suit your requirements.

Bullet Lists Line Breaks

When using bulleted lists in WordPress, by default they’re stacked without any space between them.

The standard spacing is as follows:

  • Responsive Web Design
  • SEO
  • Social media Management
  • Brand development
  • Graphics Design

This is how the code looks:

<ul>

<li>Responsive Web Design</li>

<li>SEO</li>

<li>Social Media Management</li>

<li>Brand Development</li>

<li>Graphic Design</li></ul>

 

This works well with a shortlist with no descriptors, but what if some text goes along with it? Isn’t it preferable if space is like this:

Responsive Web Design

Create an impactful website design for your company’s dramatic display and effective branding.

SEO

When you need it the most, get found through search engines. Use your ability to generate leads from generic searches to dominate Google Page 1 for the keywords you want to be found for.

Social Media Management

Interact with your clients and fans across several social media platforms, including Facebook, Twitter, and Instagram, from brand awareness to business verification.

Brand Development

Work through brand conceptualization, logo development, stationery design, etc. You’ll need to hit the ground running all the brand aspects if you’re just starting as a new firm or looking to build a fresh image for your brand.

Graphic Design

Proposals, posters, and environmental graphics will wow your prospects and put you in a position to close the deal.

WordPress Bullet and Numbered List Line Spacing

You can make spaces in bullet points and numbered lists in the following way:

In the upper right corner of the text field, select the Text tab. A tag appears at the start of each bullet point or number. To make a space, simply add the following code to the beginning tag.

style="padding-bottom: 16px;"

As a result, the whole code at the top of each bulleted or numbered item would be:

<li style=”padding-bottom: 16px;”>

(Replace the WordPress curly quotes with straight quotes if you copy and paste this code.)

You can adjust the padding spacing (16px) to whatever line spacing you want.

Conclusion

You can use the text editor to insert a break using the standard <br /> tag, but they will be stripped if you use more than one. When you need a little extra space, having your breaks deleted or transformed into a paragraph isn’t going to cut it.

I’m sure you’ve run into this issue before and were looking for solutions. We hope this article helped you understand how to Add a Line Break (New Line Spacing) in WordPress.

Load More Related Articles
Load More By Susana Taylor
Load More In How to

Leave a Reply

Your email address will not be published. Required fields are marked *