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

Question

I have an interesting layout issue in CSS. My scenario: Imagine a standard paragraph of text with justified alignment. The last word, however, is the authors name, which needs to be aligned to the right border. Depending on the length of text and the width of the paragraph, this could require a longer distance between the last word of the text and the author's name. It could also happen that the paragraph fills the last line completely, and then the author's name should appear one line below, and still aligned to the right.
I have an image here that illustrates this behavior, see the footnotes:
See that in the first footnote the author ("Der Herausgeber") is aligned to the right, but remains in the last line of the text, while in the second footnote the author ("D. H.") jumps one line down, due to text length.
I have tried to emulate this with the following 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>
So far, the author comes as a separate element, and it jumps to the next line as a separate unit (no wraps allowed). But I have problems aligning it to the right border. I have tried min-width and max-width, which did not work. I have also tried to approach this with flexbox, but until now I did not come even close to a solution. Maybe the HTML code needs to be modified as well. Is there any hint you could give me?

Answer 1

You can try something like this using 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 2

just set float: right; to author span tag
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>

Answer 3

You want something like this? I separated the .author from the 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>