CODEWITHSUNDEEP
csstumblr
Sindre
Sindre

Reputation: 23

Add read more link into the end of a paragraph?

I need to change read more link to be displayed at the end of the paragraph.

img

I need it to be like the green paragraph. Today it is like the red paragraph.

Website: http://sindreolsson.tumblr.com - Check last post where I use read more.

CSS:

.tumblr-text .rmlink { display: inline; }

HTML

{block:Text}
<!-- TEXT -->
<div class="tumblr-text">
{block:Title}<div class="title">{Title}</div>{/block:Title}
<div class="copy">{Body}
{block:More}<div class='rmlink'><a href="{Permalink}">Continue reading..</a></div>{/block:More}</div>
</div><!-- /.tumblr-text -->
{/block:Text}

Upvotes: 1

Views: 8486

Answers (2)

hellp&#233;
hellp&#233;

Reputation: 9

In my case, I also had to disable the <br> tags in order to make it work, kind of like this:

.copy br {
  display: none;
}

Upvotes: 1

Jayowend
Jayowend

Reputation: 1792

If you have a parent container with a fixed width, set the child elements to have display: inline to have them collapse like in-line text

.copy * {
    display: inline;
}

Of course, this will break the natural formatting of all previous <p></p> if you have more than one paragraph (which you don't want happening), so to preserve the original formatting, you only need to set the last element (specifically <p> elements) before the Read More break to have display: inline, i.e. the second-last child element if your Read More <div> is the last child.

But actually by the looks of it, tumblr likes to generate a set of empty <p></p> tags after the final element of the {body} text, so you'll need to account for the offset.

.copy > p:nth-last-of-type(-n+2) {
    display: inline;
}

This selects the immediate descedent > paragraph element p that is the last to second-last (-n+2) child of the type :nth-last-of-type. To clarify, -n+2 in this scenario simply means select the last element, as well as the second-to-last element since you need to set the empty <p></p> that tumblr generates to display: inline as well as your actual last paragraph with content.

And then you can up the aesthetics with ellipsis if you want using additional CSS with the ::after selector and content: set to the unicode escape for ellipsis (u2026).

.copy > p:nth-last-of-type(2)::after {
    content: "\2026";
}

EDIT :

Forgot to mention that this code alone will effect all posts that have <p></p>regardless of whether they contain the Read More break, and to only target those specific posts you need to modify the CSS to only apply to posts that have Read More links. One way to differentiate posts is to assign to the post a class name (e.g., readmore) wrapped around {block:More}{/block:More} block tags which only render on posts with Read More links.

CSS

.copy.readmore > p:nth-last-of-type(-n+2) {
    display: inline;
}

HTML

<div class="copy{block:More} readmore{/block:More}">
    ...
</div>

Also, since Read More breaks are not rendered on the permalink page of the post, the CSS won't be applied there, and it will only be applied on index pages (your blog's main page) where the break occurs.

:nth-last-of-type ::after &hellip; - \2026

Upvotes: 0

Related Questions