我在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>
到目前为止,作者作为一个单独的元素出现,它作为一个单独的单元跳到下一行(不允许换行)。但是我在将其与正确的边界对齐时遇到了问题。我尝试了最小宽度和最大宽度,但没有用。我也尝试使用flexbox来解决这个问题,但是直到现在我还没有找到解决方案。也许还需要修改HTML代码。你能给我什么提示吗?
最佳答案
您可以使用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>