0

I have a long paragraph in a div, similar to a lyrics in a song. Each line in the song/div has a BR tag forcing a new line.

If however the line doesn't have enough room to fit all in one line, it wraps down to the next line. All good.

I want all the text to be left aligned, except for the wrapped words/tokens which were placed on the following line, those words/tokens should be right aligned.

The word wrap is automatic of course so I can't manually place the words on a new div and just right align specific divs.

Edit: I've tried text-align-last: right, that property isn't supported in some browsers (Epiphany), but in Firefox where it is supported it doesn't have the proper effect, because if the entire line DOES fit without wrapping, it's right aligned because text-align-last overrides the standard text-align in those cases.

Any ideas?

localdevjs
  • 13
  • 2
  • Please provide enough code so others can better understand or reproduce the problem. – Community Sep 09 '22 at 04:19
  • Please provide your css and html – Rohit Gupta Sep 09 '22 at 04:33
  • You can use text-align-last (in combination with display: inline-block and putting each line into a div instead of having them separated by
    ). However, if the line actually has to break into 3 lines only the last will be aligned right. Is this good enough?     – A Haworth Sep 09 '22 at 06:44

1 Answers1

1

I have an idea with text-align-last:

First of all, you have to use javascript (or what ever) to modify your paragraph, so each sentence should be wrapped by a div (or p).

Let's assume here is your original paragraph:

<div>
    I need somebody who can love me at my worst <br>
    No, I'm not perfect, but I hope you see my worth
</div>

we can replace <br> by </p><br/><p>, then add <p> on top, </p> at the bottom, so it looks like this:

<div>
    <p>I need somebody who can love me at my worst </p><br>
    <p>No, I'm not perfect, but I hope you see my worth</p>
</div>

Next, we add style text-align-last: right for p, AND set display: inline-block to make it align left, avoiding the issue of overrides first line you said above. The result will be:

enter image description here

KaZaT
  • 254
  • 2
  • 15