How to Add a "Read More" HTML Break in Tumblr

Adding a "Read More" break on Tumblr is an excellent way to break up your blog content and make it easier to scroll through multiple posts. It's easy to do using the standard rich text editor used by Tumblr, but if you want to add a Tumblr "Read More" break in HTML, you need to add a small bit of code. It isn't standard HTML code, and it won't look like it works when you preview the post, but after you post, it shows up as you want it to. It's a good idea to know both approaches, though, because the standard method is much simpler.

Adding a "Read More" break is easy using the standard rich text editor on Tumblr. First, write the beginning section of your post, meaning the part you want to go before the "Read More" break. Then select "Enter" to start a new line and notice the "+" symbol that appears toward the right of the editor window beside the new line. Click this symbol, and options appear, with the far-right one being a row of three dots against a gray background.

Click the three-dot symbol to insert the "Read More" break using the simple method. You can also use the shortcut "Ctrl"+"Shift"+"K" on a PC or "Command"+"Shift"+"K" on a Mac to do the same thing. This automatically generates the HTML code you need. You don't need to go into the HTML editor if you don't want to.

You can also create a Tumblr "Read More" break through the HTML editor on Tumblr. To access the editor, click on the gear icon in the top right corner of the screen when you're creating a new post or editing an existing one and then click the drop-down menu beside "Text editor." Choose "HTML" from the options displayed, and the editor switches to HTML mode.

The process from this point onward is simple. If you already have text in place, you see the "

" and "

" tags for the beginnings and endings of paragraphs, respectively. Between the ending and beginning tag, where you want the "Read More" break to be located, type "[[MORE]]" (without quotation marks) to generate the "Read More" break.

However, this code isn't standard for HTML, and if you click on "Preview," it displays just as you wrote it. Don't worry, though. When you publish the post, it shows up as a break, just like it does when you use the previous method.

The last format for the editor in Tumblr is the Markdown editor, and you can also create a "Read More" link using this editor. The process is exactly the same as for HTML. You type the text you want to go before the "Read More" break, and then "[[MORE]]" before you continue typing your text. It won't show on the preview, as in HTML mode, but it works when you publish the post.

Although the "Read More" link is the most useful way to separate your content, it might also help to know how to insert line breaks in HTML. This is easy to do: Insert the code "

---

" (without the quotation marks) at the point you want the line break to appear. You don't have to put this between closing and opening paragraph tags. It works anywhere.