5

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?

Koby Douek
  • 16,156
  • 19
  • 74
  • 103
lipao
  • 51
  • 1
  • 4

2 Answers2

3

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>
Koby Douek
  • 16,156
  • 19
  • 74
  • 103
0

Since your method is forcing block display, you could try this alternative method using text-indent.

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

It doesn't exactly align the lines following the first line of text towards right as per syntax, but I think this might be the result which you are trying to achieve.

Here is the code snippet: 

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>

And Here is the fiddle

hulkinBrain
  • 746
  • 8
  • 28
  • I was actually going to implement that too, since I don't want the excess lines (running from right) to stretch as far back as the first line. But as you admit, it doesn't solve the problem correctly. – lipao Oct 24 '17 at 16:58
  • 1
    @lipao Since there doesn't exist a line by line CSS selector for now, you could use the combination of Koby's solution and my solution for a pure CSS approach. I've updated the code snippet and my fiddle. Or if you are open to a JS approach, you could take a look at Lining.js http://zencode.in/lining.js/. – hulkinBrain Oct 24 '17 at 19:03