在第一行后更改文本对齐

Question

我有一个跨越几行的文本.第一行应该从左到右运行,但是任何不适合第一行的多余文本应该是右对齐的.

这是我想要描述的内容(有3个两行段落):

1. Lorem ipsum dolor sit amet, consectetur adipiscing    |
                                                    elit.|
2. Sed do eiusmod tempor incididunt ut labore et dolore  |
                                            magna aliqua.|
3. Ut enim ad minim veniam, quis nostrud exercitation ul-|
                     lamco laboris nisi ut aliquip ex ea.|

我尝试过这个简单的解决方案:

div {
  text-align: right;
}

div::first-line {
  text-align: left;
}

但这不起作用.强制阻止显示到第一行 - div::first-line {display: block;}- 也没有帮助.

将第一行或每隔一行关闭成一个单独的span或用某些东西操纵或使其全部预格式化的文本不是一种选择; 它应该自动进行.

有没有办法用CSS实现这一目标？

Answer 1

如果将每一行包装为单独的div，则可以使用以下text-align-last属性：

div {
   text-align: left;
   text-align-last: right;
   margin-bottom:10px;
}

<div>Fungus is common in temperate and tropical regions around the world. When young, it seems a puffball; in maturity, the outer layer of fruit body tissue splits open in a star shape, similar in appearance to the earthstars.</div>
<div>The fungus grows in mutual symbiosis with roots of various trees, especially in sandy soils. It can open up its rays to expose the spore sac in response to increased humidity</div>
<div>The rays have an irregularly cracked surface, while the spore case is pale brown and smooth with an irregular slit or tear at the top.</div>