如何用CSS添加换行符？

I'm working on a WordPress site and attempting to break a "Read more" link to a new line. The code is automatically generated through a widget, so I cannot simply add a break or paragraph tag :(

我正在使用WordPress网站并试图打破“更多”链接到新行。代码是通过小部件自动生成的,所以我不能简单地添加一个中断或段落标记:(

This could be done by simply putting a class rule of display:block but my issue is that my link style uses a background color, so using block makes it look like crap (since it spans the full width).

这可以通过简单地放置一个类规则display:block但我的问题是我的链接样式使用背景颜色,所以使用块使它看起来像废话(因为它跨越整个宽度)。

Code :

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

3 个解决方案

#1

You can make the link to behave like a table. It then becomes to a block level element, also keeps the minimum width.

您可以使链接表现得像表。然后它变成块级元素,也保持最小宽度。

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

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

You can also insert a line break with a pseudo element.

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

.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>

#2

You should insert your read more text within a new <p> tag if you would like it on a new line, and keep your code nice and clean.

如果您希望在新行上添加更多文本,请在新的

标记中插入,并保持代码的美观和清洁。

Then as you say you have a background style applied, you could then put it inside a <span> or some other tag that isn't block based.

然后如您所说,您应用了背景样式,然后可以将其放在或其他非基于块的标记内。

#3

There's a pretty good chance you'll need to get under the hood and adjust some php to do it right...

有一个很好的机会你需要深入了解并调整一些PHP才能做到正确...

First Check out the documentation

首先查看文档

You'll probably need to add something like:

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

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>';
}

to your functions.php file.

到您的functions.php文件。

Please be sure to read the documentation, don't just copy and paste the code, different setups (child themes and so on) may need slightly different code.

请务必阅读文档,不要只复制和粘贴代码,不同的设置(子主题等)可能需要稍微不同的代码。

#1