在第一行之后更改文本对齐

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>

Answer 2

由于您的方法是强制块显示，您可以尝试使用文本缩进的替代方法。

p {
  margin-left: 3em; 
  text-indent: -3em;
}

它并没有按照语法将第一行文本之后的行完全对齐，但我认为这可能是您想要实现的结果。

这里是sn-p的代码：

p { 
  text-align-last: right;
  margin-left: 3em; 
  text-indent: -3em 
 }

<p>I am a very long
sentence where my second line is longer.sentence where my second line is 
 longer. sentence where my second line is longer.sentence where my second line  is longer. sentence where my second line is longer.sentence where my second line  is longer. sentence where my second line is longer.sentence where my second line  is longer. sentence where my second line is longer.sentence where my second line  is longer. sentence where my second line is longer.</p>
<p>I am a very long
sentence where my second line is longer.sentence where my second line is longer.sentence where my second line is longer.sentence where my second line is longer.sentence where my second line is longer.sentence where my second line is longer.sentence where my second line is longer.sentence where my second line is longer.</p>

这是fiddle