如何在 CSS 里面加一个换行符？

Question

我正在 WordPress 网站上工作，并试图将 "Read more" link 换行。代码是通过小部件自动生成的，所以我不能简单地添加一个分隔符或段落标记:(

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

代码：

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

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

您可以使 link 的行为类似于 table。然后变成块级元素，也保持最小宽度。

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

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

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

.more-link {
  background: gold;
}

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

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

如何在 CSS 里面加一个换行符？

How to add a line break inside with CSS?

css

wordpress