Align first line to the left, while other to the right using CSS -

Align first line to the left, while other to the right using CSS -

is possible have first line of text (or inline-blocks) aligned left, while next 1 right using css? i'm sure can done using js, looking cleaner , simpler solution.

i have navigation bar (which <ol> in markup). it's one-line long, got case, when it's grew long enough, broke sec line. below photo of that. boss asked me align sec line right, while keeping first intact.

now looks that:

what i'm aiming (i'd create fixes create prettier on image below):

the markup. li items inline-blocks, alter that.

<ol class="phase-labels"> <li class="phase-label phase-current">company</li> <li class="phase-label phase-inactive">the policy</li> <li class="phase-label phase-inactive">property insurance</li> <li class="phase-label phase-inactive">additional clauses</li> <li class="phase-label phase-inactive">public liability</li> <li class="phase-label phase-inactive">public liability additional</li> <li class="phase-label phase-inactive">employers liability</li> <li class="phase-label phase-inactive">quotes</li> </ol>

you seek using direction propertie + text-align:justify fill entire first-line.

what involve? :

it reverse reading direction of li (as inline-boxes) , punctuation. if 1 line , lis stand towards right.

demo

basic css

ol { display:block; position:relative; direction:rtl; text-align:justify; }

note: bad text-align cannot overwritten through pseudo class :first-line.

you have display:flex propertie too. demo

basic css :

ol { display:flex; flex-wrap:wrap; justify-content:flex-end; }

css