CSS：Right-aligned 部分文本具有灵活的水平 space

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

你想要这样的东西吗？我将 .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>

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

只需将 float: right; 设置为 author span 标签

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

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

CSS：Right-aligned 部分文本具有灵活的水平 space

CSS: Right-aligned portion of text with flexible horizontal space

html

css

layout

text-alignment