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

Question

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

我这里有一张图片来说明这种行为，请参阅脚注：

在第一个脚注中看到作者（“Der Herausgeber”）与右侧对齐，但仍保留在文本的最后一行，而在第二个脚注中，作者（“DH”）向下跳一行，由于文字长度。

我尝试使用以下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;设置为author范围标记

即可

＆＃13;

＆＃13;

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

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

您可以使用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>

Answer 3

你想要这样的东西吗？我将.author与p

分开了

p {
  clear: both;
  width: 350px;
  text-align: justify;
  margin-bottom: 0;
}

.author {
  display: inline-block;
  float: 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. </p><span class="author">The Author</span>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor massa. </p><span class="author">The Author</span>