WordPress Tips: How to Add a Line
Break in a Page or Post Title in Gutenberg

It seems like it should be a pretty straightforward task to simply add a line break or two to this title in order to achieve a more balanced appearance. However, the title field doesn’t allow for either of the following methods for adding a line break:

1. HTML Method: Insert a <br> tag at the desired line break point.
2. Keyboard Method: Place your cursor at the desired line break position and press Shift + Return (mac) or Shift + Enter (Windows).

For the record, method #2 above works for adding line breaks to text content within body content blocks such as Paragraphs and Headings.

A simple, plugin-free way to add a line break to a page or post title in Gutenberg is to switch [temporarily] to the “Code Editor” view.

1. Click the 3-dot menu icon in the top right.
2. Under “Editor” select “Code editor”.
3. In this view, the field accepts HTML so you can safely insert <br> tags.

Now you know how to insert a line break in a page or post title. Yay! However, you might notice that while the new line break makes the title look great on devices with a large screen, it doesn’t look so great on mobile. Boo! Fortunately, there is a solution for this: we can apply some super simple CSS to “hide” the br tag for smaller screens.

1. Open the WordPress Customizer:
   • Click “Customize” link in top bar, if viewing page from front-end, OR
   • From the left menu, select Appearance > Customize.
2. When the Customizer sidebar opens, select “Additional CSS”.
3. Copy the code below and paste into the built-in CSS code editor.

@media screen and (max-width:767px) {
    .entry-title br {
	display: none;
    }
}