CODEWITHSUNDEEP
htmlcsstext-alignment
lipao
lipao

Reputation: 51

Change text align after first line

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?

Upvotes: 5

Views: 3261

Answers (2)

hulkinBrain
hulkinBrain

Reputation: 746

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

Upvotes: 0

Koby Douek
Koby Douek

Reputation: 16693

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>

Upvotes: 3

Related Questions