css - 如何证明一首诗中的行

Question

我想按行显示诗歌，使行的末端对齐，以强调押韵，如下所示:

<div style='text-align:justify'>
<p>aaaa aaa aaaaaa aa aaa aaaa</p>  
<p>aaaa aaa aaaaa aaa aaaa aaaa</p>  
<p>aaa aaaa aaaa aaa aaaaa</p>  
<p>aa aaaaa aaaa aaaaa aaaaa aaaaa</p>  
</div>

但这不起作用 - 很可能是因为每一行都被视为一个单独的段落。

有什么想法吗？

Answer 1

你可以做的是使用伪元素 :after 让 p 文本不是最后行文本，这样它会适本地证明:

div {
    text-align: justify;
    background: #EEE;
    width: 200px;
}
div p:after {
    content: '';
    display: inline-block;
    width: 100%;
}

<div>
    <p>Lorem ipsum dolor sit amet</p>
    <p>Ruculis merti asani.</p>
    <p>Tedrima ergi nihil et capet,</p>
    <p>Puritumus lasi ce lani.</p>
</div>