html - 有没有办法在元素位于新行时忽略的内联元素之前添加填充？

Question

我正在设计一个链接的样式，我想在简短的 <p> 之后内嵌显示该链接元素。理想情况下，我希望该链接显示在文本内，但在链接和段落末尾之间有一个小空间。当段落文本在行的中间结束并且链接紧随其后时，它看起来正是我想要的。问题是我想将链接文本(“了解更多”)保持在一起而不是跨行，所以当整个元素在新行结束时，它前面也有填充。

这是一个 Squarespace 网站，所以一些默认的 CSS 样式有点不透明，您必须重新设计代码块中的任何内容，尤其是链接。我试过使用 inline和 inline-block显示类型。

编辑:这是带有文本的代码块:

<h2 style=text-align:center;>
  Headline Text
</h2>
<p class="issue-explain">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. <a class="issue-learn" href="/test">Learn More →</a></p>

这是我目前在 CSS 中得到的内容。

a.issue-learn {
  display: inline;
  margin-left: 1em;
  white-space: nowrap; 

这是当文本不够长以强制链接到另一行时的样子:https://i.imgur.com/ivEMTyb.png

下面是文本将链接向下推到下一行时的样子:https://i.imgur.com/sgFPH23.png

Answer 1

试试这个:

/*SO related*/
body{max-width:290px;}

p.issue-explain{
display:inline;
}

p.issue-explain::after{
content:" ";
margin-left:1em;
}

<h2 style="text-align:center;">
  Headline Text
</h2>
<p class="issue-explain">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. aaaaaaa</p>

<a class="issue-learn" href="/test">Learn More →</a>

<h2 style="text-align:center;">
  Second article
</h2>
<p class="issue-explain">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. consequat. consequat.</p>

<a class="issue-learn" href="/test">Learn More →</a>