html - CSS:具有灵活水平空间的文本右对齐部分

Question

我在 CSS 中遇到了一个有趣的布局问题。我的场景:想象一段标准的文本对齐方式。然而，最后一个词是作者姓名，需要与右边框对齐。根据文本的长度和段落的宽度，这可能需要文本的最后一个词和作者姓名之间的距离更长。也有可能段落完全填满了最后一行，然后作者的名字应该出现在下面一行，并且仍然右对齐。

我这里有一张图片可以说明这种行为，请参阅脚注:

看到在第一个脚注中，作者(“Der Herausgeber”)向右对齐，但保留在文本的最后一行，而在第二个脚注中，作者(“D. H.”)向下跳了一行，由于文本长度。

我尝试用下面的 HTML/CSS 模拟这个:

p {
  width: 350px;
  text-align: justify;
}

span.author {
  display:inline-block;
  text-align:right;
  max-width:100%;
  font-style: italic;
  white-space: nowrap;
}

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. <span class="author">The Author</span></p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor massa. <span class="author">The Author</span></p>

到目前为止，作者作为一个单独的元素出现，它作为一个单独的单元跳转到下一行(不允许换行)。但是我在将它对齐到右边界时遇到了问题。我试过 min-width 和 max-width，但没有用。我也尝试过使用 flexbox 来解决这个问题，但直到现在我还没有接近解决方案。也许 HTML 代码也需要修改。你有什么提示可以给我吗？

Answer 1

您可以使用 float:right 尝试类似的操作

p {
  width: 350px;
  text-align: justify;
}

span.author {
  display:inline-block;
  text-align:right;
  font-style: italic;
  white-space: nowrap;
  float: right;
}

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. <span class="author">The Author</span></p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor massa. <span class="author">The Author</span></p>