在段落末尾添加阅读更多链接？

Question

我需要更改阅读更多链接以显示在段落的末尾。

我需要它像绿色段落。今天它就像红色段落。

网站：http://sindreolsson.tumblr.com - 查看我上次使用的帖子了解详情。

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}

Answer 1

在我的情况下，我还必须禁用<br>标记才能使其正常工作，有点像这样：

.copy br {
  display: none;
}

Answer 2

如果您有一个具有固定宽度的父容器，请将子元素设置为display: inline以使它们像内嵌文本一样折叠

.copy * {
    display: inline;
}

当然，如果你有多个段落（你不想发生），这将打破以前所有<p></p>的自然格式，所以为了保留原始格式，你只需要在Read More break之前设置最后一个元素（特别是<p>元素）以获得display: inline，   即如果您的阅读更多<div>是最后一个孩子，则为倒数第二个子元素。

但实际上从它的外观来看，tumblr喜欢在<p></p>文本的最后一个元素之后生成一组空的{body}标签，因此您需要考虑偏移量

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

这会选择直接后代>段落元素p，它是(-n+2)类型的倒数第二个:nth-last-of-type子项的最后一个。 为了澄清，在这种情况下-n+2只是意味着选择最后一个元素，以及倒数第二个元素，因为您需要将tumblr生成的空<p></p>设置为display: inline as以及你的实际最后一段内容。

然后，如果你想使用::after选择器和content:设置为省略号的unicode转义（u2026），你可以用省略号来增加美学。

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

---

编辑：

忘记提及单独使用此代码会影响所有<p></p>的帖子，无论它们是否包含Read More中断，并且只针对那些您需要修改CSS的特定帖子，仅适用于那些帖子有阅读更多链接。区分帖子的一种方法是为帖子分配一个类名称（例如，readmore），其中包含{block:More}{/block:More}块标记，这些标记仅在具有“阅读更多”链接的帖子上呈现。

<强> CSS

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

<强> HTML

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

此外，由于阅读更多中断不会在帖子的固定链接页面上呈现，因此CSS不会在那里应用，并且它只会应用于索引页面（您的博客的主页面）发生休息的地方。

---

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