html - 右对齐父 <p> 内的 <span>

Question

我想将换行文本右对齐到 p 的右侧。

这是我当前代码的简化版本:

p {
  text-align: center
}

span {
  text-align: right
}

<p>
  lorem ipsum lorem ipsum lorem ipsum
  <br />
  <span>-author</span>
</p>

但我的跨度仍然居中。如果我使用 float: right 它会在右边，但它不会与 p 标签的最后一个字符内联。设置 max-width 并不理想，因为 lorem ipsum 可以是任意长度。

这是一个 jsfiddle 当前:https://jsfiddle.net/dxgs3u41/

如何将跨度与 p 的最后一个字符右对齐？

Answer 1

一种非位置的可能性，但同样，该段落需要内联而不是display:block。

body {
  text-align: center;
}

p {
  display: inline-flex;
  flex-direction: column;
  text-align: center;
  border: 1px solid red;
}

span {
  text-align: right;
}

  <p>
    lorem ipsum lorem ipsum lorem ipsum
    <br />
    <span>-author</span>
  </p>