Question

我正在使用WordPress网站并试图打破“更多”链接到新行。代码通过窗口小部件自动生成，因此我不能只是添加一个中断或段落标记：（

这个可以通过简单地设置display:block 的类规则来完成，但我的问题是我的链接样式使用背景颜色，所以使用{{ 1}}使它看起来像废话（因为它跨越整个宽度）。

代码：

block

Answer 1

如果您想在新的<p>代码中添加更多文字，请将其添加到新代码中，并保持代码的整洁和干净。

然后如您所说，您已应用了背景样式，然后可以将其放在<span>或其他不基于块的标记内。

Answer 2

很有可能你需要深入了解并调整一些PHP才能做到正确...

首先Check out the documentation

您可能需要添加以下内容：

add_filter( 'the_content_more_link', 'modify_read_more_link' );
function modify_read_more_link() {
  return '<br><a class="more-link" href="' . get_permalink() . '">Link Text...</a>';
}

到你的functions.php文件。

Please be sure to read the documentation，不要只复制和粘贴代码，不同的设置（子主题等）可能需要稍微不同的代码。

Answer 3

您可以使链接的行为类似于表格。然后它变为块级元素，也保持最小宽度。

＆＃13;

.more-link {
  display: table;
  background: gold;
}

＆＃13;

Post excerpt is here ... <a href="url" class="more-link">Read More</a>

＆＃13;

您还可以使用伪元素插入换行符。

＆＃13;

.more-link {
  background: gold;
}

.more-link:before {
  content: "\a";
  white-space: pre;
}

＆＃13;

Post excerpt is here ... <a href="url" class="more-link">Read More</a>

＆＃13;

如何用CSS添加换行符？

3 个答案: