Change text align after first line

Question

I have a text spanning across several lines. The first line should run from left to right, but any excess text that doesn't fit into the first line should then be right-aligned.

Here's what I'm trying to describe (with 3 two-line paragraphs):

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.|

I have tried this simple solution:

div {
  text-align: right;
}

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

But that doesn't work. Forcing block display to the first line – div::first-line {display: block;} – doesn't help either.

Closing the first line or every other line into a separate span or something to manipulate with or making it all preformated text is not an option; it should proceed automatically.

Is there any way to achieve this with CSS?

Answer 1

If you wrap each of your lines as a seperate div, you can use the text-align-last property:

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>